Docker 部署单页应用

·  阅读 790
Docker 部署单页应用

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天,点击查看活动详情

1. Docker 介绍

Docker 是一个基于 GO 语言和 Linux 内核的虚拟化容器技术,遵从 Apache2.0 协议开源。

Docker 与虚拟机给人的感觉比较相似,但是两者的实现原理不同:Docker 是虚拟化操作系统,而虚拟机则是虚拟化硬件设备。Docker 可利用 Linux 内核来创建独立的 Linux 容器,只占用一组与操作系统隔离的进程,就可以创建一个内部环境保持不变的容器。这种方式也更加利于项目迁移和运行,并且相比虚拟机,也省去了大量的系统配置和资源占用。

2. Docker 安装

windows 环境下安装 Docker 需要安装桌面端,直接在 Docker - Get Started 页面下载对应的 Docker Desktop 安装包安装即可。

3. Docker 基本操作

因为 Docker 是一种虚拟化容器技术,所以最常用的操作就是“容器”「Container」的操作;另外容器的创建也需要一个基础的创建模板,这个模板就是“镜像”「Image」。

这里简单介绍一下与镜像和容器相关的几个基本操作:

# docker拉取镜像,例如 docker pull nginx:1.21.6
docker pull 镜像别名:版本号
# 删除镜像,例如 docker rmi nginx:1.21.6
docker rmi 镜像id/镜像name
# 查看镜像列表
docker images

# 查看容器列表, 不加-a查看正在运行的,加上-a查看所有容器
docker ps -a
# 启动容器
#(-d 后台运行, --name 容器别名, -p 宿主机端口:容器端口, --network 桥接网络别名, 最后是镜像名称:镜像版本)
docker run -d  --restart always --name vue-app-container -p 3006:3006 vue-app:1.0.0
# 关闭一个已启动容器,例如 docker stop vue-app-container
docker stop 容器ID/容器别名
# 启动一个关闭的容器 ,例如 docker start vue-app-container
docker start 容器ID/容器别名
# 删除容器,例如 docker rm vue-app-container
docker rm 容器ID/容器名
# 查看一个容器的详情 ,例如 docker inspect vue-app-container
docker inspect 容器ID/容器别名
# 进入容器内部,例如 docker exec -it vue-app-container /bin/bash
docker exec -it 容器ID/容器别名 /bin/bash
复制代码

4. Vue 应用镜像

这里不论是 Vue 应用还是 React 之类的应用,都可以用这样的方式发布;Vite 和 Webpack 也可以不做区分

首先,Vue 之类的单页应用,不论是用 Vite 还是 Webpack,都需要将对应的项目代码打包成普通的 js、css 等文件,最后通过 Nginx 等进行发布。

所以,创建单页应用镜像的第一步就是打包。

Docker 创建镜像的方式有:

  1. 基于远程 pull 的镜像创建
  2. 本地导入镜像(也可以看做是直接使用)
  3. 基于 Dockerfile 创建(最常用的创建方式)

4.1 Dockerfile 配置文件

什么是 Dockerfile?

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

---摘自“菜鸟教程”

Dockerfile 文件的第一行命令,都是 FROM 命令,表示依赖的镜像。因为我们创建的镜像基本上都不会从0开始,最低都会依赖一个系统镜像。

文件内每条执行命令都以一个关键词作为开始,常用命令有:

  1. FROM: 依赖镜像
  2. RUN:需要执行的 shell 命令
  3. COPY:文件复制命令
  4. CMD:镜像容器运行时执行的命令
  5. ENV:环境变量,一般会在 Dockerfile 文件内部预先定义
  6. ARG:构建参数,类似环境变量,仅在 build 镜像时定义
  7. VOLUME:需要挂载的数据卷,将容器内的某个数据卷映射为宿主机的磁盘位置,可以避免容易过大或者数据丢失
  8. EXPOSE:仅声明使用端口,只有在运行容器时没有指定端口的时候自动映射到这里指定的端口

4.2 编写 Nginx 配置文件

在构建 Docker 镜像时,虽然可以执行一些命令,但是基本上不会通过命令来创建一个 nginx 配置文件。所以,我们需要在项目目录中创建一个 nginx.conf 文件。

### :::
### 服务器 nginx 配置,请勿改变 listen 端口
### :::
server {
    listen       80;
    server_name  localhost;

    root   /usr/share/nginx/vue-app;

    location / {
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    # 接口转发
    location ~* ^\/(sys|app)\/ {
       proxy_pass                 http://app-server:8080;
       proxy_redirect             off;
       proxy_set_header           Host $host;
       proxy_set_header           X-Real-IP $remote_addr;
       proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
复制代码

这个 nginx.conf 文件仅作为示例,需要根据实际情况修改。

4.3 构建镜像

在执行镜像构建命令之前,我们需要在根目录下创建一个 Docker 配置文件 Dockerfile

# 配置 nginx 资源转发, alpine 为纯净版本
FROM nginx:1.21.6

# 服务器环境
COPY dist/ /usr/share/nginx/vue-app/

COPY nginx.conf /etc/nginx/conf.d/default.conf
复制代码

这个文件仅仅是将外部打包后的 dist 文件夹里面的内容,复制到容器内的 /usr/share/nginx/vue-app/ 内,在复制 nginc.conf 文件到 /etc/nginx/conf.d/default.conf 作为默认 Nginx 配置。

之后执行构建命令:

docker build -t vue-app:1.0.0 .
复制代码

注意后面的 .

这一步会默认在当前目录查找 Dockerfile 文件并进行镜像构建,并且用 -t 指定镜像名和镜像版本号。

5. 创建容器与启动

在上一步镜像创建完成之后,就可以根据该镜像创建容器了。

docker run -p 80:80 -d -name vue-app-container vue-app
复制代码

这里指定了将容器的 80 端口映射到宿主机的80,端口,这样我们直接在本地打开浏览器访问 http://localhost 即可。

6. 根据环境变量创建镜像

在实际的开发过程中,通常需要区分不同的环境,比如开发环境、测试环境、演示环境等。这个时候如果只有一个配置文件的话就经常需要改来改去,非常容易造成发布事故。

所以,我们需要通过一个『变量』来区分不同的环境,这里介绍一种比较简单的方法:创建不同的nginx.conf 文件按照不同的环境动态引用到镜像中。

  1. 第一步,按照特定格式创建nginx配置文件,这里我们以nginx.serverName.conf 为例。
# nginx.dev.conf 文件
server {
    # 其他配置一般不变,只调整接口转发。当然也可以按照实际情况配置负载均衡、https等
    # 接口转发
    location ~* ^\/(sys|app)\/ {
       proxy_pass                 http://app-server-dev:8080;
       proxy_redirect             off;
       proxy_set_header           Host $host;
       proxy_set_header           X-Real-IP $remote_addr;
       proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}


# nginx.prod.conf 文件
server {
    # 其他配置一般不变,只调整接口转发。当然也可以按照实际情况配置负载均衡、https等
    # 接口转发
    location ~* ^\/(sys|app)\/ {
       proxy_pass                 http://app-server-dev:8080;
       proxy_redirect             off;
       proxy_set_header           Host $host;
       proxy_set_header           X-Real-IP $remote_addr;
       proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
复制代码
  1. 第二步,修改 Dockerfile 打包配置文件

上面我们已经创建好了不同的 nginx 的配置文件,但是具体使用哪一个,还需要在Dockerfile 中声明一个环境变量,来区分打包命令执行时的配置。

# 配置 nginx 资源转发, alpine 为纯净版本
FROM nginx:1.21.6

# 服务器环境
ARG SERVER

COPY dist/ /usr/share/nginx/vue-app/

COPY nginx.${SERVER}conf /etc/nginx/conf.d/default.conf
复制代码
  1. 第三步,调整打包命令

在已经修改了Dockerfile 添加好环境变量配置后,我们只需要根据不同的环境,在打包镜像时传入不同的环境变量参数即可。

# 开发环境
docker build -t vue-app:1.0.0 --build-arg SERVER=dev .
# 正式环境
docker build -t vue-app:1.0.0 --build-arg SERVER=prod .
复制代码
  1. 第四步,根据镜像创建容器。

这一步与上文的容器创建一致,不再赘述。

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改