使用 Docker 构建并部署自己的网页到服务器

之前有一个网页是部署在 Github Pages 上的，现在在服务器上部署一下，顺便练习一下 Docker 的使用。

因为服务器是临时的，所以没有绑定域名，简单拿 IP + 端口 访问一下。

◇ 制作并发布 Docker 镜像

▷ 编写 Dockerfile 文件

进入项目的根目录，新建一个文本文件 .dockerignore，将打包 image 时需要排除的路径填写到文件中：

1
2
3
4
5
.git
.github
.gitignore
README.md
xxx.txt

然后新建一个文本文件 Dockerfile，指定构建的过程和方法。本次是基于 Nginx 构建的，内容如下：

1
2
3
4
FROM nginx:1.24-alpine
COPY . /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx", "-g", "daemon off;" ]

▷ 使用 Github Actions 构建并发布镜像文件

使用 Action 的好处是可以确保环境干净，同时可以实现全自动，更方便一些。
进入 \.github\workflows 目录，新建一个工作流文件 docker.yml，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
name: Docker Build and Push

on:
  push:
    branches:
      - main
      
jobs:
  build-and-push:
    runs-on: ubuntu-latest

    steps:
    - name: Check out repository
      uses: actions/checkout@master

    - name: Set up Docker Buildx
      uses: docker/setup-buildx-action@v2

    - name: Log in to Docker Hub
      uses: docker/login-action@v2
      with:
        username: ${{ secrets.DOCKERHUB_USERNAME }}
        password: ${{ secrets.DOCKERHUB_PASSWORD }}

    - name: Build and push Docker image
      uses: docker/build-push-action@v3
      with:
        context: .
        platforms: linux/amd64,linux/arm64
        push: true
        tags: <user_name>/<my_project>:latest

登录 Docker Hub 所需的用户名和密码通过 GitHub Secrets 提供，需要在仓库的 Settings > Secrets and variables > Actions > new repository secret 新建 2 个变量，填入自己 Docker Hub 的用户名和 Token，如下图所示：
repository secret

然后将项目 Push 到远程仓库，Action 会自动构建并推送镜像到 Docker Hub。

显示成功后可以去 Docker Hub 查看，发现已经成功推送了：
Docker Hub

◇ 在服务器上部署自己的镜像

进入项目目录：

1
2
3
4
5
6
7
mkdir my-website
cd my-website

mkdir docker
cd docker

vim docker-compose.yml

键入 i 打开编辑模式，填入以下内容：

1
2
3
4
5
6
7
8
version: '3.3'
services:
    my-website:
        restart: always
        ports:
            - '4545:80'
        container_name: my-website
        image: '<user_name>/my-website:latest'

键入 :wq 保存并退出。

然后启动 Docker 容器：

1
2
# 后台运行
docker-compose up -d

◇ 放行端口 访问网站

登录阿里云，在 “安全组” 里放行上面使用到的端口，然后浏览器访问 http://ip:4545 ，即可显示网站页面：

网站