CentOS安装nginx，部署vue项目
1、安装nginx依赖包
yum install gcc-c++ -y
yum install pcre pcre-devel -y
yum install zlib zlib-devel -y
yum install openssl openssl-devel -y
2、下载安装包和解压
# 安装之前，最好检查一下是否已经安装有nginx
find -name nginx
# 如果系统已经安装了nginx，那么就先卸载
yum remove nginx
# 首先进入/usr/local目录
cd /usr/local
# 从官网下载最新版的nginx
wget http://nginx.org/download/nginx-1.17.7.tar.gz
# 解压nginx压缩包
tar -zxvf nginx-1.17.7.tar.gz
3、开始安装
# 进入nginx目录
cd nginx-1.17.7
./configure --user=nobody --group=nobody --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_gzip_static_module --with-http_realip_module --with-http_sub_module --with-http_ssl_module
make
make install
whereis nginx
4、启动
/usr/local/nginx/sbin/nginx
5、查看nginx运行进程状态
netstat -anptu | grep nginx
6、常用命令
cd /usr/local/nginx/sbin/
# 启动
./nginx
# 停止 相当于先查出nginx进程id再使用kill命令强制杀掉进程
./nginx -s stop
# 停止 相当于是待nginx进程处理任务完毕进行停止
./nginx -s quit
# 重启
./nginx -s reload
# 强制关闭
pkill nginx
# 查看nginx进程
ps aux|grep nginx
7、测试
默认80端口
8、打包vue文件
在自己的电脑（windows）上打包vue项目
# 进入项目目录
cd D:\myvue\myblog
# 打包命令
npm run build
这个时候，目录下就会生成dist文件
####
vue项目npm run build报错npm ERR! missing script: build（已解决）
找了很多解决方法都不行，最后打开自己的package.json文件发现：build后面多了个：prod
最后执行命令：npm run build:prod
#####
9、打包文件上传CentOS服务器
使用xftp上传文件
10、配置 nginx.conf
打开：/usr/local/nginx/conf/nginx.conf 文件中间添加配置，完成后执行第六步常用命令：/usr/local/nginx/sbin/nginx –s reload
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; #access_log logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html; index index.html index.htm; } #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; } } # *********************其余不动，添加以下配置 开始*********************** server { listen 8001; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root /home/myblog/web/dist; #vue前端项目打包后放在这里 index index.html index.htm; #这个index.html 是上面dist目录下的index.html try_files $uri $uri/ /index.html; # 解决刷新出现404 } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } # *********************结束********************* }
}
####
这次部署vue+Nginx的教训
1，打包的问题，我不懂打包的原理，把vue的代理去掉了，这是大问题，
2，Nginx的原理问题，我不懂Nginx代理的问题，导致配置搞了很久，这些搞了很久，
收获
但是这些坑都是踩过了，我对打包和Nginx的原理有了更深刻的认识，
另外就是我对跨域的问题也有了更新的认识，这很好，可以后端flask解决，也可以前端解决，很好，enjoy！
#####
前端vue+后端flask ，配置Nginx的时候出现的问题
```
# *********************其余不动，添加以下配置 开始***********************
server {
listen 9527;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# 这是前端静态文件的配置，
location / {
root /root/qz/QZTestPlatform/dist; #vue前端项目打包后放在这里
index index.html index.htm; #这个index.html 是上面dist目录下的index.html
try_files $uri $uri/ /index.html; # 解决刷新出现404
error_page 405 =200 $request_uri;
}
# 这是后端接口的配置，
location /prod-api/ {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;
return 200;
}
proxy_pass http://192.168.111.3:5000;
# proxy_pass http://127.0.0.1:5000/web-api/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
# *********************结束*********************
```
配置的时候，出现了两个问题，都是因为对于Nginx不够熟悉导致的，
1，Nginx出现了405了，这是因为我的Nginx配置接口的地方走到静态文件里面去了，
2，对于location的配置还是不够熟悉，
####
