必要环境准备:
-
xshell xftp 工具
用于操作虚拟机,上传文件等。xshell免费版安装参考 -
安装 Node
版本:v14 或 v16 -
开发工具
推荐 VSCode -
VSCode必装插件
VSCode 插件市场搜索并安装 Volar, 且一定要禁用 Vetur,不然代码会出现组件使用了但编译器还报组件未使用的警告信息,另外尤大也在 Vue3 生态话题说过 Volar 将会替代 Vetur 作为 Vue 的官方插件。
下载源码并打包发布
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/