Docker 构建 Vue 项目镜像
# 初始化一个 vue 相关项目
- 这里我们以
vuepress项目为例
# 创建项目文件夹并进入
mkdir docker-vue && cd docker-vue
# 使用 yarn 或 npm 初始化
yarn init # npm init
# 将 VuePress 安装为本地依赖
yarn add -D vuepress # npm install -D vuepress
# 创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md
# 在 package.json 中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 目录结构
.
├── docs
│ ├── .vuepress (可选的)
│ │ └── config.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 为了方便编译部署，这里我们把编译的输出目录设置为项目根目录下
默认为
.vurepress/dist，参考 官方说明 (opens new window)
module.exports = {
dest: './dist'
}
1
2
3
2
3
- 测试运行和编译
# 运行
npm run docs:dev # vuepress dev docs
# 编译
npm run docs:build # vuepress build docs
1
2
3
4
5
2
3
4
5
# 编写 Nginx 配置文件
因为这里我们没有特殊配置，所以使用默认的 如果需要自定义配置的，配置好后文件名为
default.conf，构建镜像的时候复制到镜像内部即可
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 编写 Dockerfile 文件
FROM nginx:1.20
MAINTAINER yihwang.top
EXPOSE 80
# 如果需要自定义Nginx 配置的话，可以删除镜像默认的，添加自己定义的
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
# 复制编译好的 vue 项目文件到 nginx 指向的路径
COPY dist/ /usr/share/nginx/html/
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 构建 docker 镜像
# 进入项目目录
cd docker-vue
# 更新库并且编译
npm install
npm run docs:build
# -t 指定镜像名称
# . 为当前目录，会根据 Dockerfile 文件构建
docker build -t docker-vue .
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 推送镜像
如果有自己的仓库或者云仓库，也可以选择推送到云上； 这里以腾讯云为例
# 登录云仓库
sudo docker login -u=xxx -p xxx ccr.ccs.tencentyun.com
# 先给镜像打个标签, [ImageId] 为镜像ID或名称：docker-vue ，[tag] 为版本号：1.0, latest
sudo docker tag [ImageId] ccr.ccs.tencentyun.com/xxx/xxx:[tag]
# 推送镜像
sudo docker push ccr.ccs.tencentyun.com/xxx/xxx:[tag]
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
上次更新: 2021/10/16, 00:29:48