通过 Docker 部署前端静态资源到远程服务器的完整指南
在现代软件开发中，掌握将前端应用部署到生产环境是一项关键技能。本文将详细介绍如何使用 Docker 将前端静态资源部署到远程服务器，并确保其可通过浏览器访问。
前提条件
- 拥有一台支持 SSH 访问的远程服务器
- 本地开发环境已配置好前端项目
第一步：在远程服务器上安装 Docker
- 使用 SSH 登录远程服务器：
ssh your_username@server_ip
- 更新系统软件包：
sudo apt-get update
- 安装 Docker 必要依赖：
sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
- 添加 Docker 官方 GPG 密钥：
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
- 添加 Docker 仓库源：
echo \
"deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
- 安装 Docker：
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
- 验证 Docker 安装：
sudo docker run hello-world
第二步：准备前端静态资源
- 在本地创建项目目录：
mkdir -p nginx-static-site
cd nginx-static-site
-
将静态资源文件（如 index.html、css、js 等）放入项目目录。
-
创建 Dockerfile：
# 基于 Alpine 版本的 Nginx
FROM nginx:alpine
# 将所有文件复制到 Nginx HTML 目录
COPY . /usr/share/nginx/html
# 暴露 80 端口
EXPOSE 80
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
第三步：构建 Docker 镜像
- 在项目目录下执行构建命令：
docker build -t nginx-static-site .
- 查看构建结果：
docker images
第四步：镜像分发
方法一：推送到 Docker 仓库
- 登录 Docker Hub：
docker login
- 打标签：
docker tag nginx-static-site yourhubusername/nginx-static-site
- 推送镜像：
docker push yourhubusername/nginx-static-site
方法二：导出为 tar 包
- 导出镜像：
docker save -o nginx-static-site.tar nginx-static-site:latest
- 上传到服务器：
scp nginx-static-site.tar your_user@server_ip:/path/to/upload
第五步：运行容器
- 方式一：从仓库拉取：
docker pull yourhubusername/nginx-static-site
- 方式二：从本地 tar 包加载：
docker load -i nginx-static-site.tar
- 启动容器：
docker run -d -p 80:80 yourhubusername/nginx-static-site
第六步：访问应用
- 确保服务器 80 端口开放：
sudo ufw allow 80
- 访问地址：
http://server_ip
