什么是 Dockerfile？
Dockerfile 是一个用来构建镜像的文本文件
dockerfile指令集
1、FROM 这个镜像的妈妈是谁？(指定基础镜像)
2、MAINTAINER 告诉别人，谁负责养它？（指定维护者信息，可以没有）
3、RUN 你想让它千啥（在命令前面加上RUN即可）
4、ADD/COPY 给它点创业资金(C0PY文件，会自动解压)
5、WORKDIR 我是cd,今天刚化了妆（设置当前工作目录）
6、VOLUME 给它一个存放行李的地方（设置卷，挂载主机目录）
7、EXPOSE 它要打开的门是哈（指定对外的端口）
8、CMD 奔跑吧，兄弟！(指定容然启动后的要干的事情)
dockerfile进行构建
单阶段构建前端镜像
编写dockerfile文件之前需要了解做哪些准备
1、构建vue前端镜像
vue运行需要基于nodejs环境，所以我们需要先去拉取node镜像到本地。
2、运行node容器
docker run -itd --name webserver-vue -p 8080:8080 node:16.15.0
3、进入到容器中
docker exec -it webserver-vue bash
4、在容器里拉去代码
5、进入vue项目目录中，安装依赖
npm install
6、启动项目
npm run serve
7、我们访问宿主机的8080端口，取查看启动的页面
这就是我们在容器中运行vue项目的整个流程。
编写dockerfile
1、首先创建一个空目录
mkdir -p /opt/docker-images/webserver-vue
2、进入到这个目录编写dockerfile文件
dockerfile的原理
编写dockerfile：
FROM node:16.15.0
RUN git clone https://gitee.com/mirschao/webserver-vue.git
WORKDIR webserver-vue
RUN npm install
EXPOSE 8080
CMD ["npm", "run", "serve"]
3、构建镜像
在我们编写的dockerfile文件目录下执行：
docker build -t webserver-vue:v1.0 .
构建结束后，我们去查看镜像列表，发现就有我们刚刚构建的vue镜像：
4、然后运行我们构建的镜像
docker run -itd --name webserver-vue-project -p 8090:8080 webserver-vue:v1.0
构建后端镜像
步骤和前端vue镜像构建一样。
1、拉取后端基础镜像
docker pull python:3.8-alpine3.15
2、运行一个后端容器
docker run -itd --name webserver-backend -p 8000:8000 python:3.8-alpine3.15
3、进入容器：
docker exec -it webserver-backend sh
4、克隆后端代码
git clone https://gitee.com/mirschao/webserver-backend.git
我们克隆的时候报错，没有git，这是因为我们用的镜像是python，只有python相关的命令，所以我们退出容器，在宿主机克隆，然后将其copy到容器中。
docker cp webserver-backend webserver-backend:/
5、进入后端目录，安装依赖
pip install -i https://mirrors.ustc.edu.cn/pypi/web/simple -r requirements.txt
6、运行
python manage.py runserver 0.0.0.0:8000
镜像构建
1、创建一个空目录：
mkdir -r /opt/docker-images/webserver-backend
2、在空目录下编写dockerfile文件
3、构建镜像
docker build -t webserver-backend:v1.0 .
4、运行我们构建的镜像
构建多阶段镜像
编写Dockerfile：
FROM node:16.15.0
COPY ./ ./app
WORKDIR /app
RUN npm install && npm run build
FROM nginx:1.22
RUN mkdir /app
COPY --from=0 /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
nginx.conf:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events{
worker_connections 1024;
}
http{
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr $remote_user [$time_local]"$request"'
'$status $body_bytes_sent "$http_referer"'
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
keepalive_timeout 65
server{
listen 80;
server_name localhost;
location /{
root /app;
index index.html;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html{
root /usr/share/nginx/html;
}
}
}
build log：
[root@VM-4-13-centos webserver-vue]# docker build -t vue-project:v1.0 .
Sending build context to Docker daemon 1.158MB
Step 1/8 : FROM node:16.15.0
---> 9d200cd667d5
Step 2/8 : COPY ./ ./app
---> cb570ffd9b8f
Step 3/8 : WORKDIR /app
---> Running in 62279cfa7623
Removing intermediate container 62279cfa7623
---> 26fd73e70b3d
Step 4/8 : RUN npm install && npm run build
---> Running in 082f6206b084
added 945 packages, and audited 946 packages in 30s
5 vulnerabilities (1 high, 4 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 8.5.5 -> 8.19.3
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v8.19.3>
npm notice Run `npm install -g npm@8.19.3` to update!
npm notice
> webserver-vue@0.1.0 build
> vue-cli-service build
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.
- Building for production...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
DONE Compiled successfully in 8990ms5:50:48 AM
File Size Gzipped
dist/js/chunk-vendors.afc28a93.js 180.76 KiB 62.87 KiB
dist/js/app.26e0ea80.js 15.53 KiB 9.49 KiB
dist/js/about.8698b44c.js 0.46 KiB 0.32 KiB
dist/css/app.8371b52b.css 0.42 KiB 0.26 KiB
Images and other types of assets omitted.
Build at: 2022-11-06T05:50:49.026Z - Hash: 5889634e69107ee8 - Time: 8990ms
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Removing intermediate container 082f6206b084
---> ae7386b0ca54
Step 5/8 : FROM nginx:1.22
---> 08a1cbf9c69e
Step 6/8 : RUN mkdir /app
---> Running in 8f41de08ba90
Removing intermediate container 8f41de08ba90
---> e8876e85769c
Step 7/8 : COPY --from=0 /app/dist /app
---> 17a764158e2c
Step 8/8 : COPY nginx.conf /etc/nginx/nginx.conf
---> e03f48501576
Successfully built e03f48501576
Successfully tagged vue-project:v1.0
[root@VM-4-13-centos webserver-vue]#
运行：
