前言：

​ 前后端分离，前后端项目往往分开部署，有的甚至部署到不同的服务器，大二的软件工程团队作业项目强后端分离，下面讲下用Nginx部署Vue项目及遇到的坑。

Vue项目打包

打开命令行进入项目根目录

注：本机需先安装NodeJS

1
2
3
4
5
6
#安装项目所需模块
npm install 
#启动服务
npm run serve
#打包项目 ,该指令执行后会生成一个dist目录（存放项目的静态文件）
npm run build

将整个dist目录上传到服务器

Nginx环境搭建

这里使用docker的Nginx镜像快速搭建。

连接云服务器，命令行输入如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#从Docker Hub查找镜像
#docker search [OPTIONS] TERM
#--automated :只列出 automated build类型的镜像；
#--no-trunc :显示完整的镜像描述；
#-s :列出收藏数不小于指定值的镜像。
docker search -s 100 nginx #从Docker Hub查找所有镜像名包含nginx，并且收藏数大于1000的镜像
INDEX       NAME             DESCRIPTION                     STARS     OFFICIAL   AUTOMATED
docker.io   docker.io/nginx  Official build of Nginx.        13876     [OK]       
#参数说明：
#NAME: 镜像仓库源的名称
#DESCRIPTION: 镜像的描述
#OFFICIAL: 是否 docker 官方发布
#stars: 类似 Github 里面的 star，表示点赞、喜欢的意思。
#AUTOMATED: 自动构建。 

docker pull nginx #拉取镜像，默认最新版

docker images #列出本机镜像

#创建一个新的容器并运行 （--volume , -v: 绑定一个卷，相当于将容器相应路径映射到服务器上）--name="": 为容器指定一个名称
docker run --name nginx -p 本机端口:容器端口（nginx默认80） -d （后台运行）
-v ……/nginx.conf（服务器配置文件路径）:/etc/nginx/nginx.conf（容器配置文件路径） 
-v ……/dist（前端打包文件上传路径）:/usr/share/nginx/html（容器内部目录） nginx:latest （镜像名或id）

配置Nginx

注：此处若未配置 try_files $uri $uri/ /index.html;项目除根路径外刷新后会直接报404，下面有说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
vim ……/nginx.conf(服务器上映射的配置文件)
#找到80端口的server模块
server {
        listen       80;
        server_name  【你的域名或ip】;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
            root   /usr/share/nginx/html; #根路径
#	    proxy_pass http://127.0.0.1:8080
            index  index.html index.htm; #首页
                 
           try_files $uri $uri/ /index.html; #方法1
       # try_files $uri $uri/ =404;
	   # try_files $uri $uri/ @router; #方法2
	   #参数: $uri
       #解释: 表示当前请求的URI(域名后的内容),不带任何参数 例如访问: http://localhost/about
       #$uri: "/about"
       #第一个参数$uri Nginx首先会查找/下有没有名为$uri的文件，本例中为名为demo的文件，如有则将请求传递给$uri
       #第二个参数$uri/ 如找不到名为$uri的文件，Nginx接着会查找/下有没有名为$uri的文件夹，本例中为名为about的文件			夹，如有则将请求传递给$uri/ ，访问该文件夹下的index
       # 第三个参数 
       		#= 404 如前两个参数都无法接收请求 就返回状态码404
	   		#若是路径，则访问，本例是请求http://ip:80/index.html	
        }
        
        
	#之所以出现刷新404的现象，是因为在nginx配置的根目录 /usr/share/nginx/html下面压根没有'about/find'这个真实资源存	在，这些访问资源都是在js里渲染的
	#在服务端nginx配置里添加vue-route的跳转设置
	#location @router {
        #	rewrite ^.*$ /index.html last;
   	#}

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
	location = /50x.html {
            root   html;
        }
    }

改完后保存退出。

执行docker restart nginx 重启容器后配置生效

到此部署结束

扩展Nginx热加载

docker exec -it nginx /bin/bash 进入容器，执行 service nginx reload 按ctrl+P+Q退出容器

或者直接docker exec -i nginx（容器名） service nginx reload （执行命令）

Nginx指令（Windows）

1
2
3
4
5
6
7
8
9
#启动
start nginx
#重新加载配置文件
nginx -s reload
#关闭，stop是快速停止nginx，可能并不保存相关信息；quit是完整有序的停止nginx，并保存相关信息。
nginx -s stop
nginx -s quit
#查看版本
nginx -v

END