思路：
通过 Dockerfile 构建出镜像，然后通过镜像来创建容器，程序就跑在容器中。
Dockerfile: 类似于“package.json”
|
V
Image: 类似于“Win7纯净版.rar”
|
V
Container: 一个完整操作系统
方式一：利用VScode插件
1.1 安装docker
网上都有，可自查
1.2 拉取所需环境的镜像
// 拉取node镜像，版本是需要的16.13.0
(1) docker pull node:16.13.0
// 查询镜像列表，看node镜像是否拉取成功
(2) docker images
node 16.13.0 bbdd5360e7c6 8 months ago 850MB
// 根据镜像创建并运行容器
(3) docker run -it --name my_container bbdd5360e7c6 /bin/bash
// 查看node和git的版本
node -v
git --version
exit
// 查看容器列表
(4)docker container ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
306ca930a1f2 bbdd5360e7c6 "docker-entrypoint.s…" 2 minutes ago Exited (0) About a minute ago my_container
// 启动容器
(5) docker container start 306ca930a1f2
// 查看是否启动成功（可省）
(6) docker container ps -a
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
306ca930a1f2 bbdd5360e7c6 "docker-entrypoint.s…" 3 minutes ago Up 9 seconds my_container
// 执行容器的交互伪终端，进入到/bin/bash目录里
(7) docker exec -it 306ca930a1f2 /bin/bash
// 在为终端中ls，然后切到root目录下，克隆一下项目代码，（如果是自己想要重新写一个项目的话，就在这个目录下直接构建项目）
(8) cd root
(9) git clone http:.....
1.3 在VScode里安装 Remote-Containers插件
安装成功后，左下角会多了一个图标，点击：
然后点击Attach to Running Container...：
接下来会出现正在运行的容器：
如果没有运行的容器，那就自己重新启动。
docker container start 容器名称或者容器ID
选择运行的容器之后，选择想要打开的项目，终端切到”bash“。
切到项目所在的目录，执行”npm install”或者“yarn install”，然后“npm start” 或者 “yarn start”即可。
方式二：使用Dockefile方式构建镜像，进而创建容器
前提也是安装好Docker。
2.1 创一个文件夹demo
里面放置刚克隆下来的web代码（或者新创建的web项目），并在web项目文件夹下，创建一个Dockefile文件，而且必须是这个文件名，不然创建镜像的时候，docker找不到Dockefile文件，就无法创建镜像了。
所以现在的文件目录是：
- demo
|
---- web // 前端代码
|
---- Dockerfile
2.2 编写Dockerfile
# First step: Build with Node.js
# [FROM node为第一阶段，主要是实现前端包的安装及项目打包 ]
FROM node:16.13.0 AS Builder
# Docker container 工作目录
WORKDIR /app
COPY package.json yarn.lock /app/
# 将此指令提前，通常都能利用前一次build 的结果，
# 因此能极大节省重新 build image 所需要的时间。
RUN yarn install
# 将当前项目文件夹内的所有文件及子文件全部copy 到 /app 文件夹中
COPY . /app
RUN yarn build
# Secend step: Deliver the dist folder with Nginx
# [FROM nginx为第二阶段，--from=Builder 表示把第一阶段构建完成的dist目录及我们之前添加的nginx.conf拷贝到nginx对应的目录中]
FROM nginx:stable-alpine
COPY --from=Builder /app/build /usr/share/nginx/html
# COPY --from=Builder /app/nginx.conf /etc/nginx/conf.d/default.conf
# 启动nginx容器
CMD ["nginx", "-g", "daemon off;"]
# 容器内的进程将发布端口 80
EXPOSE 80
- 在web项目文件夹下创建一个
build文件夹，因为yarn build会产生一个build文件夹（当不知道穿件什么文件夹的时候，可以自行build一下，看看会出现什么文件夹）； - 启动nginx时，主进程其实是sh，而容器是因为sh这个主进程产生的，当该条命令执行完毕之后，sh作为主进程会退出，容器自然也会退出，因此导致nginx启动不了。所以需要使用
CMD ["nginx", "-g", "daemon off;"]启动；
2.3 创建镜像
打开终端，切到demo/web文件夹下，开始创建镜像
docker build --no-cache -t test/message:v1.1.0 .
--no-cache怕有缓存-t用来指定image镜像的名称，后面还可以加冒号指定标签，如果不指定默认就是latest.表示Dockerfile文件所在路径，.就表示当前路径
2.4 使用新的镜像运行容器
docker run -d --name nginx-web -p 8080:80 docker.io/test/message:v1.1.0
如果Dockerfile文件里没有有加CMD，就直接运行容器
docker container run -p 8080:80 -it dosec-web:v1 /bin/bash
-p： 参数是将容器的80端口映射为本机的8080端口-it： 参数是将容器的shell容器映射为当前的shell,在本机容器中执行的命令都会发送到容器当中执行dosec-web:v1： image的名称/bin/bash： 容器启动后执行的第一个命令,这里是启动了bash容器以便执行脚本--rm： 在容器终止运行后自动删除容器文件
然后再浏览器中访问 http://localhost:8080即可。(如果是公司项目的话，可能调接口的时候，会调用项目配置的生产环境中的ip和port)
PS: 初学Docker，如果有错的地方，勿喷，留言即可，一起学习 方式2 仅供参考
