玉山县建设局的网站,wordpress大主题上传,百度seo点击工具,硬件开发技术前言
本文主要用来描述#xff0c;如何用nginx部署若依项目的前端。
一、Docker 拉取 Nginx镜像
命令#xff1a;docker pull nginx
二、Vue项目打包
2.1 先配置线上后端路径
说明#xff1a;由于我打包命令是 npm run build:stage #xff0c;所以项目生效的环境文…前言
本文主要用来描述如何用nginx部署若依项目的前端。
一、Docker 拉取 Nginx镜像
命令docker pull nginx
二、Vue项目打包
2.1 先配置线上后端路径
说明由于我打包命令是 npm run build:stage 所以项目生效的环境文件是.env.staging。
所以我需要在这个文件内修改后端路径VUE_APP_BASE_API urlsurls是部署的后端域名。
解释说明这个步骤是你通过域名可以访问后端服务时这个链接地址配置在这里才有用。
2.2 将打包目录上传到服务器下
打包命令npm run build:stage 会生成一个 Dist目录。将该目录下的所有目录复制到 服务器上面的文件夹即可。
我在实验中是重新创建了目录 mydata/nginx/html然后把Dist下的所有文件拷贝到mydata/nginx/html下。
2.3 新建 nginx.conf 配置文件
我新建的该文件是放在 mydata/nginx/下 内容如下所示
worker_processes 1;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 80;server_name localhost;charset utf-8;location / {root /home/ruoyi/projects/ruoyi-ui;try_files $uri $uri/ /index.html;index index.html index.htm;}location /prod-api/ {proxy_set_header Host $http_host;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;proxy_pass http://localhost:8080/;}error_page 500 502 503 504 /50x.html;location /50x.html {root html;}}
}把上面的 root /home/ruoyi/projects/ruoyi-ui;修改为 root /yourfilePath你自己存放的打包好的路径即可。 我在实验中的目录是 root /mydata/nginx/html/
2.4 启动Docker的nginx容器
命令如下所示
docker run -d --privilegedtrue --name nginx \-v /mydata/nginx/html:/usr/share/nginx/html \-v /mydata/nginx/nginx.conf:/etc/nginx/nginx.conf \-p 80:80 nginx
docker ps查看容器是否启动成功。
服务器ip浏览器直接访问ip查看部署是否成功。
