document.write("");

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

posted @   人间春风意  阅读(20)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示

距今时间:
1018天1.00 小时 38.13 分钟

当前新增阅读数:139507