温馨提示

前端应用容器化部署，主要是实现容器化的 Nginx 服务，通过本地编译构建打包前端应用，生成 dist 文件包，并上传值服务器端的 Nginx 容器服务的 html 目录下进行部署以及配置域名访问。

编译打包

在打包部署章节中，已经给出了前端应用本地编译打包的详细操作流程，本章节不做重复的阐述，详情请查阅 前端应用打包 文档。

部署项目

• 服务器准备

准备一台 CentOS Stream 或 Rocky Linux 服务器，并通过 Docker 安装部署 Nginx 代理服务。

[esxi@localhost nginx]$ pwd
/usr/local/docker/nginx
[esxi@localhost nginx]$ ll
总用量 4
drwxr-xr-x. 7 root root   98 4月  19 2024 cache
drwxr-xr-x. 3 root root   38 4月  19 2024 conf
-rw-r--r--. 1 root root 1075 10月  8 2023 docker-compose.yml
drwxr-xr-x. 2 root root   40 4月  19 2024 html
drwxr-xr-x. 2 root root   41 4月  19 2024 logs

上传部署

将 dist 压缩成 dist.zip 文件并传到 Nginx 容器服务的 /usr/local/docker/nginx/html 目录。

• 上传文件

上传完毕后执行以下命令查看：

# 查看上传路径
[root@S1 html]# pwd
/usr/local/docker/nginx/html

# 查看目标路径文件
[root@S1 html]# ll
总用量 4808
-rw-r--r--.  1 root root     497 8月  15 2023 50x.html
-rw-r--r--   1 root root 4909917 3月   2 23:48 dist.zip
-rw-r--r--.  1 root root     623 10月 10 2023 index.html

# 查看目标路径文件大小
[root@S1 html]# du -sh *
4.0K	50x.html
4.7M	dist.zip
4.0K	index.html

特别提醒

前端应用包 dist.zip 压缩文件包上传后，执行命令 unzip dist.zip 解压压缩包。