使用nginx部署vue-cli项目

使用nginx部署vue-cli项目

---

本文介绍两种部署方法，一种是直接在物理机上部署，另一种是通过docker部署

ubuntu16.04使用nginx部署vue-cli

1. 安装nginx
sudo apt-get install nginx
这样安装nginx后，配置文件的位置在/etc/nginx/nginx.conf

2.打包vue-cli项目
npm run build
（这里看到网上说要修改一些配置，不然打包好后会有路径错误，但是我完全没有问题）
build好后再vue-cli项目文件夹下会出现一个dist文件夹

3.把dist文件夹里的东西放入nginx服务器目录下
我把static/和index.html放在了nginx的默认服务目录下/usr/share/nginx/html
当然你也可以放在其他地方，只不过需要在配置文件中做相应修改

记一个坑，，我的服务器用的是腾讯云，然后想用scp来上传文件，但是传不上去，以为是权限的问题，然后在/usr/share/nginx下sudo chmod 777 -R *，还是没用，最后用了WinSCP就可以了

4.修改nginx配置文件
配置文件在/etc/nginx/nginx.conf，改成下面这样

user www-data;
worker_processes auto;
pid /run/nginx.pid;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    server {
        # 你想监听的端口
        listen 80 default_server;
        listen [::]:80 default_server;
        # 如果你把dist放在了其他目录下，那么这里就要改成那个目录
        root /usr/share/nginx/html;
        # server_name是你网站的域名，如果没有域名就写ip
        server_name 1.2.3.4;

        index index.html;
        location / {
            try_files $uri $uri/ @rewrites;
        }

        location @rewrites {
            rewrite ^(.+)$ /index.html last;
        }

        location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
            expires max;
            add_header Pragma public;
            add_header Cache-Control "public, must-revalidate, proxy-revalidate";
        }
    }

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;
    gzip_disable "msie6";

    # gzip_vary on;
    # gzip_proxied any;
    # gzip_comp_level 6;
    # gzip_buffers 16 8k;
    # gzip_http_version 1.1;
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    #include /etc/nginx/sites-enabled/*;

}

5.重启nginx
不出意外的话service nginx restart就能通过http://域名(ip):端口来访问了

使用docker的nginx镜像来部署

这是另一种比较通用的部署方法
之前想用docker的ubuntu镜像，在容器里安装nginx的时候出现了莫名其妙的问题，所以直接用nginx镜像
1.准备文件
npm run build得到的dist
nginx.conf
随便找个地方新建一个目录把dist和nginx.conf放进去
我放在E:\docker\ordering

2.docker下载nginx镜像
docker pull nginx

3.运行一个容器
docker run --name=ordering -p 8080:8999 -v e:/docker/ordering/dist:/usr/share/nginx/html -v e:/docker/ordering/nginx.conf:/etc/nginx/nginx.conf nginx
解释一下参数的意思，
--name=ordering是这个容器的名字
-p 8080:8999是把宿主机的8080端口映射到容器的8999端口
-v e:/docker/ordering/dist:/usr/share/nginx/html是把宿主机上的e:/docker/ordering/dist目录挂载到容器里的/usr/share/nginx/html目录
nginx表示使用nginx镜像

注意：命令里面路径名都要小写，否则识别不出
另外有一篇很棒的介绍docker的文章