作为一个程序员，在开发过程中，经常会遇到项目部署的问题，在现在本就不稳定的大环境下，前端开发也需要掌握部署技能，来提高自己的生存力，今天就详细说一下如何把一个前端资源放到远程服务器上面通过docker部署，并且可以在浏览器中访问前端页面；
前提：你有一个远程服务器，并且可以通过 SSH 工具访问
步骤一：安装 Docker————进入远程服务器上面操作
1. 使用 SSH 连接到你的远程服务器。使用以下命令：
ssh your_username@your_server_ip2. 更新现有的软件包索引
sudo apt-get update3. 安装必要的包，这些包允允许 apt （Linux系统的命令行工具，类似cmd）使用 HTTPS访问软件包
sudo apt-get install apt-transport-https ca-certificates curl gnupg lsb-release
4. 添加 Docker 官方的 GPG 密钥，这确保你从可信来源安装 Docker：
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
5. 设置稳定的 Docker 存储库，通过添加 Docker 的 APT 软件源，可以从 Docker 官方仓库安装 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
6. 安装 Docker Engine ，更新软件包索引并安装最新版本的 Docker Engine 和容器运行时：
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io
7. 验证 Docker 安装是否成功，运行一个测试容器来验证 Docker 是否正确安装：
sudo docker run hello-world
步骤二：准备前端静态网页————本地电脑上面操作
1. 创建项目文件夹；
在自己电脑上创建一个新的项目文件夹，例如 my-static-website
2. 将你的前端静态网页文件放入项目文件夹中；
将你的静态网页文件（例如 index.html, style.css, script.js 等）放入 my-static-website 文件夹
3. 创建 Dockerfile 文件；
在项目文件夹中创建一个 Dockerfile 文件，用于定义 Docker 镜像的构建过程。以下是一个使用 Nginx 作为基础镜像的 Dockerfile 示例
# 使用官方 Nginx 镜像作为基础镜像
FROM nginx:alpine
# 将当前目录下的所有文件复制到 Nginx 容器中的默认 html 目录
COPY . /usr/share/nginx/html
# 暴露容器的 80 端口
EXPOSE 80
# 运行 Nginx
CMD ["nginx", "-g", "daemon off;"]
步骤三：构建 Docker 镜像————本地电脑上面操作
1. 导航到项目文件夹；使用cmd终端或命令行工具进入你的项目文件夹中
cd path_to_your_project_folder/my-static-website
2. 构建 Docker 镜像
运行以下命令来构建 Docker 镜像：
docker build -t my-static-website .
解释：
docker build: 构建一个新的 Docker 镜像。-t my-static-website: 为镜像指定一个标签（my-static-website）。.: 表示 Dockerfile 位于当前目录
3. 确认 Docker 镜像已构建成功 ；运行以下命令查看本地 Docker 镜像列表：
docker images
步骤四：推送 Docker 镜像到 Docker Hub（或其他镜像仓库）————本地电脑上面操作
1. 登录 Docker Hub 运行以下命令登录到 Docker Hub：
docker tag my-static-website your_dockerhub_username/my-static-website
2. 标记镜像；将构建的本地镜像标记为 Docker Hub 上的镜像：
docker tag my-static-website your_dockerhub_username/my-static-website
解释：
docker tag: 为本地镜像创建一个新的标签。my-static-website: 本地镜像名称。your_dockerhub_username/my-static-website: Docker Hub 上的镜像名称。
3. 推送镜像 将标记的镜像推送到 Docker Hub：
docker push your_dockerhub_username/my-static-website
解释：
docker push: 推送镜像到镜像仓库。your_dockerhub_username/my-static-website: 目标镜像名称。
步骤五：在远程服务器上拉取并运行 Docker 镜像——————进入远程服务器上面操作
1. 在远程服务器上登录 Docker Hub 使用以下命令登录 Docker Hub
sudo docker login
2. 拉取镜像 运行以下命令从 Docker Hub 拉取镜像
sudo docker pull your_dockerhub_username/my-static-website
解释：
sudo docker pull: 从镜像仓库拉取镜像。your_dockerhub_username/my-static-website: 要拉取的镜像名称。
3. 运行容器 运行以下命令启动容器：
sudo docker run -d -p 80:80 your_dockerhub_username/my-static-website
解释：
sudo docker run: 运行一个新的容器。-d: 后台运行容器。-p 80:80: 将容器的 80 端口映射到主机的 80 端口。your_dockerhub_username/my-static-website: 要运行的镜像名称。
步骤六：通过网址访问静态页面————本地电脑上面操作
1. 确认服务器上的防火墙允许 HTTP 流量 使用以下命令确保服务器允许 HTTP 流量：
sudo ufw allow 80/tcp
2. 访问你的域名或服务器 IP 地址；在浏览器中输入你的服务器 IP 地址或域名来访问你的静态网站。例如：
http://your_server_ip
结语
通过以上步骤，你已经成功地将前端静态网页通过 Docker 部署到远程服务器上，并且可以通过网址访问该静态页面。如果有任何问题，请随时联系。
