Vue--vue项目部署--2.Linux系统使用nginx运行vue项目

Vue–vue项目部署–2.Linux系统使用nginx运行vue项目

1. 本地Windows10运行
2. 服务器Linux运行（本篇）
3. 设置自动部署

1.环境、工具

工具	版本
Linux服务器
FileZilla（文件上传）
Xshell（指令输入）	腾讯服务器网页直接登录
nginx（yum安装）

2.基本步骤

1. 服务器安装nginx
2. 项目上传
3. 下载上传ssl证书（nginx版）
4. 服务器配置conf配置文件

3.详细步骤

1.服务器安装nginx

1.下载yum安装源

rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

2.使用yum指令安装

yum install nginx

3.完成后安装位置

#安装位置
/etc/nginx
#子级配置文件位置（已经默认引用，无需修改nginx.conf）
/etc/nginx/conf.d
#证书存放目录（不是自动安装的，可以用到了再新建）
/etc/nginx/conf.d/cert

2.上传项目文件dist（可重命名）

使用FileZilla上传项目包，位置比较随意

3.下载上传ssl证书（nginx版）

1.使用腾讯控制台下载nginx证书
2.使用FileZilla上传证书至服务器

注：
1.需要有自己的域名、证书，本文不涉及申请等操作
2.下载后有两个文件，一个是key后缀的，另一个就是证书，后缀不一定一样，我见过pem、crt不同后缀的

4.服务器配置conf配置文件

进入目录/etc/nginx/conf.d新建配置文件（后缀为.conf）
配置详细
码掉的是我的域名及ssl文件名

xxxxx为域名

server {
    listen       80;
    server_name  www.xxxxx.xyz;
    # 接收不是ssl后转发至ssl
    rewrite ^(.*)$ https://www.xxxxx.xyz:443/$1 permanent; 
}
server {
	listen 443 ssl;
	server_name www.xxxxx.xyz;

	# ssl  on; # nginx1.15后不需要该语句
	ssl_certificate   /etc/nginx/conf.d/cert/1_www.xxxxx.xyz_bundle.crt;
	ssl_certificate_key  /etc/nginx/conf.d/cert/2_www.xxxxx.xyz.key;
	ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

	location / {
        root 		/opt/vue/mybloodstripes;
        index  		out/index.html;
        try_files 	$uri $uri/ index.html;
    }
}

4.启动、停止、重启等指令

#启动（后面路径为下载nginx的主配置文件）
nginx -c /etc/nginx/nginx.conf
#停止（进入nginx文件夹）
nginx -s stop
#平滑重启（进入nginx文件夹）
nginx -s reload

# 查询占用进程
ps -ef | grep nginx
# 从容停止（下面这方法我没怎么用过）
kill -QUIT `进程号`

5.借鉴博客

文档：Vue–打包部署借鉴博客2.note
链接：http://note.youdao.com/noteshare?id=a148fc8ce327f535a330be4d0f82d627&sub=A1CDD57A4B604780A1E8ED41A0763808