如何将资源前端通过 Docker 部署到远程服务器

作为一个程序员，在开发过程中，经常会遇到项目部署的问题，在现在本就不稳定的大环境下，前端开发也需要掌握部署技能，来提高自己的生存力，今天就详细说一下如何把一个前端资源放到远程服务器上面通过docker部署，并且可以在浏览器中访问前端页面；

前提：你有一个远程服务器，并且可以通过 SSH 工具访问
步骤一：安装 Docker————进入远程服务器上面操作

1. 使用 SSH 连接到你的远程服务器。使用以下命令：

命令格式为： ssh 客户端用户名@服务器ip地址 

ssh your_username@your_server_ip

eg: 

2. 更新现有的软件包索引

sudo apt-get update

3. 安装必要的包，这些包允允许 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

步骤四：镜像上传

这里提供两种上传方式，一种是上传到指定镜像库，然后从服务器上通过pull命令拉取；

另外针对离线环境，与外网隔绝的情况下，可以通过把镜像打成tar包进行手动上传到服务器；

方式一：推送 Docker 镜像到 Docker Hub（或其他镜像仓库）————本地电脑上面操作

1. 登录 Docker Hub 运行以下命令登录到 Docker Hub：

docker login

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: 目标镜像名称。

方式二：将镜像打包成tar包，通过ssh工具上传到远程服务器

1. 导出 Docker 镜像为 tar 文件 

使用 docker save 命令将 Docker 镜像保存为 tar 文件，tar文件默认保存在当前路径；

docker save -o my-static-website.tar my-static-website:latest

2. 通过远程工具（如xftp）工具将镜像压缩文件上传到服务

-------这里根据实际的ftp文件而定；

步骤五：在远程服务器上获取并运行 Docker 镜像——————进入远程服务器上面操作

方式一：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: 要拉取的镜像名称。

方式二：手动上传的镜像

​​​​​​​1. 导航到 tar 文件所在目录，使用 cd 命令进入上传的 tar 文件所在目录：

cd /path/to/upload

2. 导入 Docker 镜像，使用 docker load 命令将 tar 文件导入为 Docker 镜像：

sudo docker load -i my-static-website.tar

解释：

• docker load: 从文件中加载镜像。
• -i my-static-website.tar: 指定输入文件

后续步骤两种方式都是一样的操作：

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 部署到远程服务器上，并且可以通过网址访问该静态页面。如果有任何问题，请随时联系。