docker-compose+nginx部署前后端分离的项目实践

下面我将详细讲解“docker-compose+nginx部署前后端分离的项目实践”的完整攻略。

环境准备

首先，我们需要准备以下环境：

• docker 17.06 或更高版本
• docker-compose 1.14 或更高版本

构建后端应用镜像

我们可以使用 Dockerfile 构建后端应用镜像，示例如下：

FROM openjdk:8-jre-alpine
COPY target/my-application.jar /usr/app/
WORKDIR /usr/app
EXPOSE 8080
CMD ["java", "-jar", "my-application.jar"]

这里使用了 OpenJDK 8 作为基础镜像，并将应用打包成一个单独的 jar 文件。我们可以将 Dockerfile 和 Jar 文件放在同一个目录下，然后使用以下命令构建镜像：

docker build -t backend-image .

构建前端应用镜像

类似地，我们可以使用 Dockerfile 构建前端应用镜像，示例如下：

FROM node:10-alpine as build-stage
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

FROM nginx:alpine
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf

这里使用了 Node.js 10 作为基础镜像，并在第一个阶段构建了前端应用代码并生成静态文件，然后在第二个阶段使用 Nginx 来提供静态文件服务。我们可以将 Dockerfile 和前端应用的代码放在同一个目录下，然后使用以下命令构建镜像：

docker build -t frontend-image .

定义docker-compose.yml

接下来，我们需要使用 docker-compose 定义容器、网络等相关的配置。

首先，我们定义一个名为 backend 的服务，将之前构建的后端应用镜像作为其镜像使用，同时将容器内 8080 端口映射到宿主机的 8080 端口。

version: '3'
services:
  backend:
    image: backend-image
    ports:
      - "8080:8080"

然后，我们定义一个名为 frontend 的服务，将之前构建的前端应用镜像作为其镜像使用。由于前端应用只需要提供静态文件服务，因此我们并不需要映射端口。

version: '3'
services:
  backend:
    image: backend-image
    ports:
      - "8080:8080"

  frontend:
    image: frontend-image

接下来，我们需要使用 Nginx 作为反向代理，在容器中监听 80 端口，将请求转发到前端或后端服务。

version: '3'
services:
  backend:
    image: backend-image
    ports:
      - "8080:8080"

  frontend:
    image: frontend-image

  nginx:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro

最后，我们使用 volumes 将之前定义的 Nginx 配置文件 nginx.conf 映射到容器内部，该配置文件将前端应用的所有 /api 请求转发到后端服务。

编写nginx.conf

我们需要编写一个 Nginx 配置文件 nginx.conf，将所有 /api 请求转发到后端服务。

server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }

  location /api {
    proxy_pass http://backend:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

启动容器

启动容器非常简单，我们只需要在项目根目录下运行以下命令即可：

docker-compose up -d

这将启动所有定义的 Docker 服务，并且在后台运行。

示例说明

示例1：添加自定义域名

假设我们有一个自定义的域名 my-domain.com，我们可以在 Nginx 配置文件中添加以下配置，将所有请求转发到容器内的 Nginx 服务。

server {
  listen 80;
  server_name my-domain.com;

  location / {
    proxy_pass http://nginx:80;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

然后，在本地电脑上添加 /etc/hosts 记录，将 my-domain.com 解析为本机的 IP 地址即可。

示例2：使用Let's Encrypt证书

如果我们需要为自己的域名添加 SSL 证书，可以使用 Let's Encrypt 提供的免费证书服务。我们可以将证书和私钥保存到主机上，并将其挂载到 Nginx 容器中。

首先，我们需要安装 certbot 工具来获取证书：

sudo apt-get update
sudo apt-get install certbot

然后，运行 certbot 命令获取证书：

sudo certbot certonly --webroot -w /path/to/your/site -d yourdomain.com -d www.yourdomain.com

该命令将会要求你向 /path/to/your/site/.well-known/acme-challenge 目录中放置一个文本文件，以便 certbot 验证你对该域名的控制权。

获取证书后，我们只需要修改 Nginx 配置文件，添加 SSL 相关的配置即可。

server {
  listen 80;
  server_name yourdomain.com;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl;
  server_name yourdomain.com;

  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/privkey.pem;

  location / {
    root /usr/share/nginx/html;
    index index.html;
  }

  location /api {
    proxy_pass http://backend:8080;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

完整的实现过程可以参照 Nginx + Let's Encrypt 实现 HTTPS 服务。

至此，我们完成了“docker-compose+nginx部署前后端分离的项目实践”的完整攻略，希望可以对您有所帮助。