如何使用Docker部署前端应用

前言

当我们开发好了一个应用, 想要模拟真实的线上运行环境，这时候我们可以借助Docker容器在本地来部署应用的生产环境, 避免上线后出现各种问题。无论是前端应用，后端应用，还是数据库应用,我们都可以使用一个容器来运行,一个容器可以看做是一个单独的虚拟主机，所以一个容器可以运行多个应用，而一个物理主机又可以运行多个容器, 所以容器技术大大的节省了服务资源。

接下来就开始使用Docker来部署一个简单的前端应用。

一. dockerfile 文件

dockerfile是什么？

dockerfile是一个镜像构建文本文件, 里面包含了一系列的指令, 这些指令告诉Docker如何创建一个容器镜像。在文件中可以用指令指定提供容器运行时所需要的程序，库，资源，配置等文件，还包含了一些运行时准备的配置参数（环境变量，用户等）

编写前端项目中的dockerfile文件

要上线一个前端项目，需要先构建打包，然后再部署。因为构建需要用到node环境，我们先使用node基础镜像来执行构建阶段, 最后将构建阶段的产物放到nginx来部署。编写dockerfile的内容就可按照这个步骤来

在项目根目录下新建一个dockerfile文件, 内容如下:

dockerfile 复制代码

# 使用 Node.js 14 作为基础镜像
FROM node:14

# 将当前工作目录设置为/app
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到 /app 目录下
COPY package*.json ./

# 运行 npm install 安装依赖
RUN npm install

# 将源代码复制到 /app 目录下
COPY . .

# 打包构建
RUN npm run build

# 将构建后的代码复制到 nginx 镜像中
FROM nginx:latest
COPY --from=0 /app/dist /usr/share/nginx/html

# 暴露 80 端口
EXPOSE 80

# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

这里之所以先把package.json 文件复制到容器中执行npm install, 再把源码复制到容器，是因为一行指令为单独的一层，docker会把每一层单独存储，每一次构建都是从变化的那一层开始构建，如果package.json 文件没有变化, 那么就不会执行install, 如果一次性把所有文件复制进去，源代码每次都会有修改，每次都会执行npm install。

二. 构建镜像

有了dockerfile 就可以使用docker build命令来构建镜像了。

确认本地安装docker, 启动docker:

s 复制代码

service docker start

构建镜像的命令如下:

s 复制代码

docker build -t <image_name>:<tag> .

-t 标记镜像的名字和标签,
. 表示从当前目录查找dockerfile来构建镜像

镜像常用指令：

查看本地镜像

s 复制代码

docker images

修改镜像标签

s 复制代码

docker tag <image_name>:<tag> <new_image_name>:<tag>

删除镜像

s 复制代码

docker rmi <image_name>:<tag>

登录hub仓库

s 复制代码

docker login -u <username> -p <password> yourhubAddress

从仓库hub仓库下载镜像

s 复制代码

docker pull <image_name>:<tag>

上传镜像到hub仓库

s 复制代码

docker push yourhubAddress/<image_name>:<tag>

三. 运行容器

现在，我们可以使用构建好的镜像来运行容器了。

运行容器命令：

s 复制代码

docke run -dp 80:80 <image_name>:<tag> --name <container_name>

-dp 表示端口映射, -p 表示端口映射, 将容器的80端口映射给主机的80 -d 表示后台运行容器
-it 表示交互式运行容器 -i 表示交互式运行容器 -t 表示分配一个伪终端
-rm 表示容器退出后自动删除容器。

容器常用命令：

docker ps 查看正在运行的容器列表
docker ps -a 查看所有容器列表
docker ps -q 查看容器的ID
docker rm <container_id> 删除容器
docker logs <container_id> 查看容器的日志
docker exec -it <container_id> /bin/bash 进入容器终端
docker stop <container_id> 停止容器
docker start <container_id> 启动容器
docker restart <container_id> 重启容器
docker inspect <container_id> 查看容器的详细信息
docker top conatiner_id 查看容器的进程列表

容器运行起来后, 通过docker inspect 可以查看到容器的ip, 这样就可通过浏览器访问容器的80端口, 就可以看到我们的前端项目了。如果是在linux命令行。可以用curl工具，

四. nginx 配置文件挂载

如果容器被删除会导致容器内的nginx配置文件丢失, 比如后端代理，静态文件的配置等。这些配置文件一般放在/etc/nginx/conf.d目录下, 我们可以将这些配置文件与本地路径挂载, 这样就不用每次都修改配置文件了。

在启动容器时, 可以通过-v <host_path>:<container_path>的方式来挂载配置文件。比如:

s 复制代码

docker run -v /home/conf/(本机路径):/etc/nginx/conf.d（容器路径） -p 80:80 -d

这样在本地地址修改配置文件，容器内的nginx配置文件也会随之修改。容器内的配置修改，本地也会改变。