Nginx和vue编译后的存放位置的配置实践
作者：工欲善其事&必先利其器
这篇文章主要介绍了Nginx和vue编译后的存放位置的配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Nginx和vue编译后的存放位置
/home/appadm/nginx/conf/目录下的nginx.conf文件中的内容如下：
worker_processes auto;
events {
worker_connections 65535;
}
http {
include mime.types;
include conf.d/*.conf;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
}
主要是这句
include conf.d/*.conf; 依赖于conf.d目录下的 以.conf为后缀的文件
/home/appadm/nginx/conf/conf.d目录下的lc_rpt.conf文件内容如下：
server {
listen 8001 ssl;
server_name 11.x.x.5 192.168.x.2;
ssl_certificate /app/sslkey/cert.crt;
ssl_certificate_key /app/sslkey/key.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
error_page 497 301 https://$http_host$request_uri;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#重点 end
#dex index.html index.htm;
location / {
root /app/lc_rpt_web/;
index index.html index.htm web/index.html;
try_files $uri $uri/ /web/index.html;
}
#反向代理的作用
location /oauthApi/ {
proxy_set_header Host $host:$server_port;
proxy_pass http://192.168.x.3:8003/;
}
#后端基础服务，反向代理的作用
location /indicator-lpt/ {
proxy_pass http://192.168.x.3:8002/indicator-lpt/;
}
}
root /app/lc_rpt_web/; #前端的内容存放的路径，和下面的解压dist目录时存储的路径保持一致。
/app/lc_rpt_web/目录下的manager.sh脚步内容如下：
- unzip /app/lc_rpt_web/dist.zip -d /app/lc_rpt_web/ – 这句是将上传到服务器上的vue编译压缩后的包，解压到/app/lc_rpt_web/目录下，在这个目录下生成dist目录，dist目录下就是最新的前端内容
- rm -rf /app/lc_rpt_web/web_bak – 删除之前的备份
- mv /app/lc_rpt_web/web /app/lc_rpt_web/web_bak – 将当前运行的前端内容转为备份
- mv /app/lc_rpt_web/dist /app/lc_rpt_web/web – 将解压后的最新的前端内容转为运行的前端内容，仅有内容变化，无配置变化，无需重启nginx
- rm -f /app/lc_rpt_web/dist.zip – 删除上传到服务器上的dist.zip
背景：
前端通过 npm run build:dev 后，执行相关的脚步后生成的编译后的结果是dist.zip
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。