使用Docker+Nginx部署前端项目

本文将介绍如何使用 Docker 和 Nginx 部署前端项目。

Docker 是一种容器化技术，能够方便地将应用程序和它们所依赖的组件打包到一个容器中，并在不同的环境中运行。Nginx 是一种高性能的 Web 服务器和反向代理服务器，常用于部署前端项目。

在开始本教程之前，请确保已经安装了 Docker 和 Nginx。

创建 Dockerfile

在项目根目录下创建一个名为 Dockerfile 的文件，并添加以下内容：

# 指定构建的基础镜像，版本根据项目需要更换
FROM node:14.18.0-alpine3.14 AS builder

# 设置工作目录
WORKDIR /app

# 安装 Git
RUN apk add --no-cache git

# 从 Git 拉取前端代码
RUN git clone https://github.com/your-username/your-repo.git /app && \
    cd /app && \
    git checkout main

# 安装依赖并编译前端代码
RUN npm install --production --registry=https://registry.npm.taobao.org && \
    npm run build

# 构建 Nginx 镜像，版本根据项目需要更换
FROM nginx:1.21.3-alpine

# 复制编译后的前端代码到 Nginx 静态资源目录
COPY --from=builder /app/dist /usr/share/nginx/html

# 复制自定义的 Nginx 配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# 暴露端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

其中，需要将 your-username 和 your-repo 替换成具体的 Git 仓库地址，nginx.conf 是自定义的 Nginx 配置文件。

Nginx 配置文件示例（nginx.conf）：

# 设置运行 Nginx 的用户
user  nginx;

# 启动的 worker 进程数量，一般设置为 auto，Nginx 会自动根据 CPU 数量设置合适的数量
worker_processes  auto;

# 错误日志路径和级别
error_log  /var/log/nginx/error.log warn;

# PID 文件路径
pid        /var/run/nginx.pid;

# 定义全局事件
events {
    # 最大连接数
    worker_connections  1024;
}

# 定义 HTTP 服务器
http {
    # 包含 MIME 类型的文件
    include       /etc/nginx/mime.types;
    # 默认 MIME 类型
    default_type  application/octet-stream;

    # 自定义的 Nginx 配置
    server {
        # 监听的端口
        listen       80;
        # 服务器名称
        server_name  localhost;
        
        location / {
            # 网站根目录，此处使用容器内的路径
            root   /usr/share/nginx/html;
            # 默认首页
            index  index.html;
            # 尝试从磁盘找到请求的文件，如果不存在则跳转到 index.html
            try_files $uri $uri/ /index.html;
        }
        
        # 定义 404 页面
        error_page  404              /404.html;
        location = /404.html {
            root   /usr/share/nginx/html;
        }
        
        # 定义 50x 页面
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
}

在 Dockerfile 和 Nginx 配置文件编写完成后，使用以下命令进行构建和运行：

构建 Docker 镜像：

Copy code
docker build -t your-image-name .

运行 Docker 容器：

cssCopy code
docker run -d -p 80:80 your-image-name

其中，your-image-name 是自定义的 Docker 镜像名称。运行容器后，可以通过访问 http://localhost 或者 http://your-domain.com 来访问部署的前端项目。

本文正在参加「金石计划」