2023-01-07

docker部署前端项目(以vue为例)

字数统计: 1.2k字 | 阅读时长: 4分

前言

以下代码，是在mac端的实现，如果是window环境，一些shell可能需要替换
默认docker已经安装成功

(docker基本知识)[https://www.runoob.com/docker/docker-tutorial.html]

docker基本概念

镜像（Image）：Docker 镜像（Image），就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。
容器（Container）：镜像（Image）和容器（Container）的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等。
仓库（Repository）：仓库可看成一个代码控制中心，用来保存镜像。

准备最基本的vue项目
以vite + vue3位例子

yarn create vite vue3-demo --template vue-ts

然后构建一下，生成dist 文件夹

cd vue3-demo

yarn install

yarn build

这样就可以了，不用关注项目内容，主要学习docker部署

构建应用镜像

拉取 nginx

nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。

# 拉取nginx
docker pull nginx:latest

# 查看镜像列表
docker image ls

# 删除镜像
docker image rm nginx:latest
# docker 镜像名称由REPOSITORY和TAG组成 [REPOSITORY[:TAG]]，TAG默认为latest

配置nginx

在项目根目录下新建nginx文件夹，然后新建default.conf文件

server {
  listen       80;
  server_name  localhost;

  #charset koi8-r;
  access_log  /var/log/nginx/host.access.log  main;
  error_log  /var/log/nginx/error.log  error;

  # 首页的指向为 /usr/share/nginx/html/index.html, 一会把构建出来的dist文件夹内容放到/usr/share/nginx/html目录下。
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
  }

  #error_page  404              /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}

编写Dockerfile文件

什么是 Dockerfile？
Dockerfile 是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明。

也就是说必须有Dockerfile才可以构建镜像

项目根目录下新建 Dockerfile文件

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/* nginx/html/ 目录下。
COPY nginx/default.conf /etc/nginx/conf.d/default.conf 命令的意思是将nginx目录下的default.conf
复制到etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换nginx镜像里的默认配置。

更多 dockerfile文件的使用看菜鸟教程

开始构建vue项目镜像

docker build -t vueapp .

-t 是给镜像命名
. 是基于当前目录的Dockerfile来构建镜像。由于 docker 的运行模式是 C/S。我们本机是 C，docker 引擎是 S。
实际的构建过程是在 docker 引擎下完成的，所以这个时候无法用到我们本机的文件。
这就需要把我们本机的指定目录下的文件一起打包提供给 docker 引擎使用。

注意：如果terminal不是在当前目录下，就不能直接写 “.”

构建成功之后，查看

docker image ls

启动应用

docker run -p 3000:80  -d --name vueApp vueapp

docker run 基于镜像启动一个容器
-p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
-d 后台方式运行
–name 容器名查看 docker 进程

# 查看所有docker容器进程
docker ps -a

# CONTAINER ID IMAGE  COMMAND  CREATED  STATUS   PORTS    NAMES
# aa2cbfff98cf   vueapp  "/docker-entrypoint.…"   22 minutes ago   Up 22 minutes  0.0.0.0:3000->80/tcp   vueApp

# 停止容器
docker stop <容器 ID>

# 重启容器
docker restart <容器 ID>

# 进入容器
# 在使用 -d 参数时，容器启动后会进入后台。此时想要进入容器，可以通过以下两种指令进入

# docker attach
# docker exec：推荐大家使用 docker exec 命令，因为此命令会退出容器终端，但不会导致容器的停止。
docker attach <容器 ID>

docker exec -it <容器 ID> /bin/bash
 
# 进入之后，可以看回nginx配置的路径 COPY dist/ /usr/share/nginx/html/
# cd /usr/share/nginx/html/ 
# ls  
# 可以看到就是dist文件夹对应的内容

打包改进

将npm run build 也放进构建镜像中进行

那么需要node镜像

docker pull node:latest

修改dockerfile文件

FROM node

WORKDIR /app
COPY package.json /app/
RUN npm install

COPY . /app
RUN npm run build


FROM nginx
COPY --from=0 /app/dist /app
COPY --from=0 /app/nginx.conf /etc/nginx/nginx.conf