【探究部署】如何在一台有公网IP的服务器上部署多个前端网站。

本文链接：https://blog.csdn.net/FJPNB/article/details/141645901

以一台有公网 IP 的服务器，部署三个 Docker 容器，每个容器运行一个前端项目，并且每个项目通过不同的域名访问为例：

步骤 1: 准备工作

确保 Docker 已安装：确保你的服务器上已经安装了 Docker。如果没有安装，可以按照官方文档进行安装：Docker安装指南
确保有三个域名：假设你的域名为 example1.com, example2.com, example3.com，并且它们都指向你的服务器的公网 IP。
DNS 配置：确保你的域名的 DNS A 记录正确指向你的服务器的公网 IP。

步骤 2: 编写 Dockerfile 和构建镜像

假设你有三个前端项目 project1, project2, project3，你可以为每个项目编写一个 Dockerfile，例如：

Dockerfile (示例，假设使用的是 Nginx 作为 Web 服务器):

# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx:alpine

# 复制你的前端项目到 Nginx 默认的静态文件目录
COPY ./dist /usr/share/nginx/html

# 暴露默认的 Nginx 端口
EXPOSE 80

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

在每个项目的根目录下，构建 Docker 镜像：

cd /path/to/project1
docker build -t project1-image .

cd /path/to/project2
docker build -t project2-image .

cd /path/to/project3
docker build -t project3-image .

步骤 3: 启动 Docker 容器

启动每个前端项目的 Docker 容器：

docker run -d --name project1-container -p 8081:80 project1-image
docker run -d --name project2-container -p 8082:80 project2-image
docker run -d --name project3-container -p 8083:80 project3-image

这样，project1 会映射到服务器的 8081 端口，project2 到 8082 端口，project3 到 8083 端口。

步骤 4: 设置反向代理服务器

为了让不同域名指向不同的 Docker 容器，你需要使用一个反向代理服务器，例如 Nginx 或 Traefik。这里以 Nginx 为例：

安装 Nginx：

sudo apt update
sudo apt install nginx

配置 Nginx：

编辑 Nginx 配置文件 /etc/nginx/sites-available/default，添加以下内容：

server {
    listen 80;
    server_name example1.com;

    location / {
        proxy_pass http://localhost:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    server_name example2.com;

    location / {
        proxy_pass http://localhost:8082;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    listen 80;
    server_name example3.com;

    location / {
        proxy_pass http://localhost:8083;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}