vue3 docker 部署
两种部署方式,serve/nginx,可按需要,将里面的参数改成变量传参
源码与Dockerfile 放在同一层级
1. 使用serve方式(复制package.json,安装依赖,打包生成dist文件夹,指定端口开放dist文件夹)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | FROM node:v20. 10.0 RUN mkdir -p /app COPY ./ package .json /app/ package .json RUN npm config set registry https: //registry.npmmirror.com \ && npm install -g serve RUN cd /app \ && npm install COPY ./ /app WORKDIR /app CMD cd /app \ && npm run build \ && serve -p 3000 dist # 使用 serve -S --ssl-cert ./certificate/xxx.crt --ssl-key ./certificate/xxx.key -p 443 dist 指定证书与端口 # 使用 sed -i 的命令替换指定文件的字符串 EXPOSE 3000 |
2. nginx(复制package.json,安装依赖,打包生成dist文件夹,dist文件夹的内容复制到nginx的html文件夹中,配置nginx)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | FROM node:v20. 10.0 AS build-stage WORKDIR /app COPY ./ package *.json ./ RUN npm config set registry https: //registry.npmmirror.com RUN npm install COPY ./ . RUN npm run build FROM nginx:latest-alpine COPY --from=build-stage /app/dist /usr/share/nginx/html COPY --from=build-stage /app/dist /etc/nginx/html COPY default .conf /etc/nginx/conf.d/ default .conf EXPOSE 3000 CMD [ "nginx" , "-g" , "daemon off;" ] |
default.conf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | server { listen 3000 ; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; } location ~* \.(?:css|js)$ { expires 1y; access_log off; add_header Cache-Control "public" ; } } |
PS:
1. 为什么使用了 root /usr/share/nginx/html; 在脚本中还复制dist的内容到nginx的 /etc/nginx/html
在 nginx中1.27.3,指定 root /usr/share/nginx/html不生效,查看日志,还是访问的 /etc/nginx/html,所以两个都复制了,没有实际去看各个版本的命令差异,能用就行,有需要可自行验证调整
2. vue3 history为什么刷新报404
这个需要再修改default.conf,比如在 location / 后加上 try_files $uri $uri/ /index.html; 之类
其它:
linux 中使用cp -f -r * ../../xxx/ 命令复制当前路径下的所有内容到指定文件夹,不会复制.开头的文件
需调整为 cp rf ./* ../../xxx/ 将隐藏文件也复制过去
有时需要将当前文件夹内的全部文件(包含隐藏文件)复制过去,但不希望复制.git文件夹,可使用
1 | find . -path './.git' -prune -o -print | cpio -pdm ../../xxx/ |
构建镜像:docker build -t test-web:0.0.1 .
有传参:docker build -t test-web:0.0.1 --build-arg XXPORT=3000 --build-arg SERVICE_URL=http://xxxxxx:8080 .
运行容器:docker run -p 3000:3000 test-web:0.0.1
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析