前端docker部署

其它部署方式

• vue-cli项目一键部署

• nuxt一键部署

docker基本概念

1. 仓库(Registry)

用来存储和分发Docker镜像的服务。 和镜像的关系，类似于npm平台（仓库）与npm包（镜像）之间的关系。

简单理解 仓库 = 镜像（<镜像> <版本标签>）的集合

分为公共仓库 和 私有仓库

• 公有仓库‌：如Docker Hub，是Docker官方提供的公共仓库，任何人都可以创建帐户并存储、共享Docker镜像。此外，国内还有一些镜像加速器，如阿里云、中国科技大学等，用于加快镜像下载速度。

• 私有仓库‌：由用户自己搭建、管理和维护，可以选择存储位置和数据安全性，实现与项目的无缝集成。私有仓库的搭建可以使用Docker官方提供的Registry镜像或其他私有仓库解决方案。

2. 镜像(Image)

镜像是构建容器的模板，可以简单理解为类似Js中的class类或构造函数。

使用

• 下载镜像有点类似于安装npm包：

npm install <包名>@<版本号>

docker pull <镜像名>:<版本号>

• 例如：

1.下载 指定版本 nginx

docker pull nginx:1.24.0

2.下载 最新 nginx

docker pull nginx:latest

3.默认是最新

docker pull nginx

• 查看所有已安装镜像

docker images

3. 容器 (Container)

最重要的就是容器

容器是镜像的运行实例。可以简单理解为”new 镜像()“的实例，通过docker命令可以任意创建容器。

• 创建容器

docker run 或 docker container run 命令创建并启动容器

--name <指定容器名称>

-d 守护进程（后台）模式运行容器

-p <外部端口>:<容器内部端口> 内外连接，例如 -p 80:80 从而可以通过主机的 80 端口来访问容器内的 80 端口服务

-v <本地文件全路径>:<容器内文件路径> 代表绑定卷， 文件如果变更 容器内的文件也会做出相应改变

最后是 镜像名称 如 nginx

• 例子:

1. 例如创建 nginx 容器

本地文件地址： /home/nginx/www
容器文件地址： /usr/share/nginx/html

本地nginx 配置文件 /home/nginx/conf/nginx.conf 容器nginx 配置文件 /etc/nginx/nginx.conf

容器名称 小公鸡

docker run -d -p 80:80 --name 小公鸡 -v /home/nginx/www:/usr/share/nginx/html -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  nginx

• 容器命令

docker ps -a # 查询全部容器

docker ps -a | grep xxx # 筛选查询容器

docker start xxx  # 运行容器

docker stop xxx  # 暂停容器

docker restart xxx  # 重启容器

docker rm xxx  # 删除容器

• 进入容器内部

# 首先知道容器id， 查看所有容器
docker ps

# 进入<容器id> = 1234 ， 启动了容器的Bash shell程序
docker exec -it 1234 bash

Dockerfile 介绍

Dockerfile可以理解为一种配置文件，用来自定义镜像， 告诉docker build命令应该执行哪些操作

一个简易的Dockerfile文件如下所示，官方说明：Dockerfile reference。

# 说明该镜像以哪个镜像为基础
FROM centos:latest

# 构建者的基本信息
MAINTAINER fe

# 在build这个镜像时执行的操作
RUN yum update
RUN yum install -y git

# 拷贝本地文件到镜像中
COPY ./* /usr/share/gitdir/

本地部署

一般的前端项目 如静态文件 和 spa 页面是很少用 docker 部署的。 但是在 SSR 或 SSG 或 node 项目，docker 就可以排上用场

下面是一个普通示例：

1. node koa2 项目示例

参考 阮一峰的网络日志

1.1. 创建 .dockerignore

在项目的根目录下，新建一个文本文件 .dockerignore ， 类似git 的 .gitignore 用来表示，哪些被忽略

一般包括

.git
node_modules
npm-debug.log

上面代码表示，这三个路径要排除，不要打包进入 image 文件。如果你没有路径要排除，这个文件可以不新建。

1.2. 创建 Dockerfile

Dockerfile 文件，没有后缀

FROM node:16.20.2
COPY . /app
WORKDIR /app
RUN npm install
EXPOSE 3000
CMD node index.js

上面代码一共五行，含义如下。

• FROM node:16.20.2

该 image 文件继承官方的 node image，冒号表示标签，这里标签是16.20.2，即16.20.2版本的 node。

• COPY . /app

将当前目录下的所有文件（除了.dockerignore排除的路径），都拷贝进入 image 文件的/app目录。

• WORKDIR /app

指定接下来的工作路径为/app。

• RUN npm install

在/app目录下，运行npm install命令安装依赖。注意，安装后所有的依赖，都将打包进入 image 文件。

• EXPOSE 3000

将容器 3000 端口暴露出来， 允许外部连接这个端口。

• CMD node index.js

在容器内执行 node index.js 命令

1.4. 创建 image 文件

有了 Dockerfile 文件以后，就可以使用docker image build命令创建 image 文件了。

docker image build -t koa-demo .
# 或者
docker image build -t koa-demo:0.0.1 .

上面代码中，-t参数用来指定 image 文件的名称 koa-demo，

后面还可以用冒号指定标签。如果不指定，默认的标签就是latest

如果运行成功，就可以看到新生成的 image 文件koa-demo了。

docker images  # 查看所有镜像

1.5. 生成容器

docker run 命令会从 image 文件生成容器

docker run -p 8000:3000 -it koa-demo /bin/bash
# 或者
docker run -p 8000:3000 -it koa-demo:0.0.1 /bin/bash

上面命令的各个参数含义如下：

• -p参数：容器的 3000 端口映射到本机的 8000 端口。
• -it参数：容器的 Shell 映射到当前的 Shell，然后你在本机窗口输入的命令，就会传入容器。
• koa-demo:0.0.1：image 文件的名字（如果有标签，还需要提供标签，默认是 latest 标签）。
• /bin/bash：容器启动以后，内部第一个执行的命令。这里是启动 Bash，保证用户可以使用 Shell。

如果一切顺利，就会返回容器内部的 Shell 提示符

1.6. 退出容器

在容器的命令行，按下 Ctrl + c 停止 Node 进程，

然后按下 Ctrl + d （或者输入 exit）退出容器

2. sap 项目示例

只解释 Dockerfile 文件， 其它请参考 示例1

参考三分钟学会使用 Docker 部署前端项目

2.1. Dockerfile

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

# 将当前工作目录设置为/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，不写就默认80端口
EXPOSE 80

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

2.2. 创建 image 文件

docker image build -t spa-demo:0.0.1 .

2.3. 生成容器

docker run -p 8000:80 -it spa-demo:0.0.1 /bin/bash

服务器部署

1. 服务器安装Docker

2. git clone 或 上传项目到服务器

3. 构建镜像

4. 运行容器

5. 域名解析

修改宿主机的 nginx 配置文件， 将域名解析到容器暴漏的端口上。

如 8000 端口：

server {
    listen       80;
    server_name  charts.coolo.top;

    location / {
      proxy_pass http://localhost:8000; 
    }
}

然后重载nginx 配置

nginx -s reload