1. 构建镜像
可以通过dockerfile文件构建镜像
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| # 使用 Node.js 16 作为基础镜像
FROM node:16.14.2
# 将当前工作目录设置为/app
WORKDIR /app
# 将 package.json 和 package-lock.json 复制到 /app 目录下
COPY package*.json ./
# 运行 npm install 安装依赖
RUN yarn config set registry https://registry.npmmirror.com/
RUN yarn install
# 将源代码复制到 /app 目录下
COPY . .
# 打包构建
RUN yarn build
# 将构建后的代码复制到 nginx 镜像中
FROM nginx:latest
COPY --from=0 /app/index.html /usr/share/nginx/html
# 复制自定义的Nginx配置到镜像中，覆盖默认配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]
|
.dockerignore 与.gitignore 语法一致。使用它排除构建无关的文件及目录，如 node_modules
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
dist.zip
|
nginx.conf用于自定义配置ngnix配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| server {
listen 80; # 端口号是80
server_name localhost;
location / {
root /usr/share/nginx/html; # nginx 默认会从这个路径下加载网页，这是 nginx 默认的网页根目录
index index.html index.htm;
}
error_page 404 /404.html; # 错误404处理
error_page 500 502 503 504 /50x.html; # 错误5XX处理
location = /50x.html {
root /usr/share/nginx/html;
}
}
|
package.json前端项目配置
1
2
3
4
5
6
7
8
| {
"name": "first-docker",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "echo \"Build success!\" && exit 0"
}
}
|
index.html前端入口
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello</title>
</head>
<body>
Hello world!
</body>
</html>
|
通过使用docker build命令构建前端镜像
1
2
3
4
| docker build -t first-docker:v1 .
# first-docker是镜像名称 :v1 代表构建的tag .代表上下文路径d，docker会在这个路径下寻找dockerfile及其它文件
# 构建下载失败可能需要换仓库地址,修改daemon.json,添加如下内容
# "registry-mirrors": ["https://docker.1ms.run"]
|
2. 查看镜像列表
| REPOSITORY |
TAG |
IMAGE ID |
CREATED |
SIZE |
| first-docker |
v1 |
15ef6b8907cc |
47 hours ago |
192MB |
3. 运行容器
如果成功构建了镜像，那么可以基于镜像运行容器
1
2
| docker run -d -p 3000:80 --name first-docker-web first-docker:v1
# 3000:80代表把宿主机的3000端口转发到容器的80端口 first-docker-web代表容器名称 first-docker:v1代表镜像标识
|
4. 查看容器
| CONTAINER ID |
IMAGE |
COMMAND |
CREATED |
STATUS |
PORTS |
NAMES |
| ad30392931f2 |
first-docker:v1 |
“/docker-entrypoint.…” |
47 hours ago |
Exited (255) About an hour ago |
0.0.0.0:3000->80/tcp |
first-docker-web |
5. 启动、停止、重启容器
1
2
3
| docker start first-docker-web
docker stop first-docker-web
docker restart first-docker-web
|
6. 进入容器执行命令
1
2
| docker exec -it first-docker-web /bin/bash
service nginx status
|
7. 查看容器日志
1
| docker logs first-docker-web
|
8. 查看容器详细信息
1
| docker inspect first-docker-web
|
9. 容器数据持久化
1
2
3
| docker stop first-docker-web
docker rm first-docker-web
docker run -d -p 3000:80 --name first-docker-web -v "$(pwd)"/ssl:/etc/nginx/ssl first-docker:v1
|
