Nginx部署youlai-admin后台管理前端

必要环境准备：

• xshell xftp 工具
  用于操作虚拟机，上传文件等。xshell免费版安装参考

• 安装 Node
  版本：v14 或 v16

• 开发工具
  推荐 VSCode

• VSCode必装插件
  VSCode 插件市场搜索并安装 Volar, 且一定要禁用 Vetur，不然代码会出现组件使用了但编译器还报组件未使用的警告信息，另外尤大也在 Vue3 生态话题说过 Volar 将会替代 Vetur 作为 Vue 的官方插件。

下载源码并打包发布

vue3-element-admin源码

1.将docs/node_modules.zip压缩文件解压到源码的根目录

2.修改vite.config.ts文件

3.打包项目源码 npm run build:prod , 生成的静态资源在根目录的/dist/文件夹下。

4.通过xftp上传静态资源到nginx

将第3步生成的文件上传到/mydata/nginx/html/文件夹下

4.修改windows的Host文件

文件默认位置：C:\Windows\System32\drivers\etc\hosts
管理员权限打开，文件末尾追加内容（不要删除其他的配置）：

# 192.168.56.10是nginx所在服务器IP，根据实际情况配置
192.168.56.10 youlai.store

5.配置nginx.config文件

/mydata/nginx/conf/nginx.conf

• 追加以下代码，参考下图：

    #配置我的上游服务器  192.168.56.2：是后台微服务所在电脑IP(根据实际情况修改)
    upstream youlai{
        server 192.168.56.2:9999;
    }

    include /etc/nginx/conf.d/*.conf; 

• 再增加配置 /mydata/nginx/conf/conf.d/youlaimall.conf 配置内容如下：

server {
    listen       80;
    server_name  youlai.store;
   
    location / {
            root /usr/share/nginx/html; # nginx工作目录是容器的而非宿主机
            index index.html index.htm;
   }
   # 代理转发请求至网关
   location /prod-api/ {
       proxy_pass http://youlai/;
   }

   # 开发环境
   location /dev-api/ {
       proxy_pass http://youlai/;
   }
    
}

6. Docker重启nginx服务（因为修改了nginx配置）

docker restart nginx
docker ps # 检查nginx是否重启成功

7. 验证服务

本地windows的浏览器访问 http://youlai.store/

8. 管理前台静态资源nginx代理完毕。后台微服务未运行，要想正常使用需要运行后台微服务。