如何正确快速的将你的前端应用打包成Docker镜像并发布

最新推荐文章于 2025-07-21 21:25:06 发布

SH的全栈笔记

最新推荐文章于 2025-07-21 21:25:06 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：后端 docker 文章标签： linux 脚本语言 docker

本文链接：https://blog.csdn.net/weixin_42667608/article/details/110433486

本文介绍了如何将前端应用打包成Docker镜像并进行发布。通过编写本地和服务器部署脚本，详细阐述了从构建前端应用、生成Dockerfile、打包推送镜像到执行部署的全过程，旨在提供一种快速且便捷的部署解决方案。

1.前言

前段时间，自己搞了个阿里云的服务器。想自己在上面折腾，但是不想因为自己瞎折腾而污染了现有的环境。毕竟，现在的阿里云已经没有免费的快照服务了。要想还原的话，最简单的办法就是重新装系统。而一旦重装，之前的搭建的所有环境就都白搭了。

再加上之前本身就想引入docker，所以就打算利用docker容器来部署这次的前端应用。

2.构建前端应用

在打包之前，首先需要一个可正常运行的前端应用。这个可以使用umi或者create-react-app来构建。

3.nginx的默认配置文件

然后需要在项目中加上默认nginx配置文件。

server {
    listen 80;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

4.编写本地构建脚本

4.1. 移除上次的目录和Dockerfile

#!/bin/bash

if [ -d "./dist" ]; then
    rm -rf ./dist
fi

if [ -f "./Dockerfile" ]; then
    rm -f ./Dockerfile
fi

因为每次更改后dist中的内容肯定与之前不同，其实这一步显得不是那么必要。运行npm的打包命令也会自动清楚该目录。

而清除Dockerfile则是为了防止更新了Dockerfile，而这次却不能得到最新的配置。

4.2. 打包前端应用

执行前端的打包命令，生成静态文件目录。

yarn build

4.3. 生成Dockerfile

echo "FROM nginx:latest" >> ./Dockerfile
echo "COPY ./dist /usr/share/nginx/html/" >> ./Dockerfile
echo "COPY ./default.conf /etc/nginx/conf.d/" >> ./Dockerfile
echo "EXPOSE 80"