Docker Compose 中配置 nginx 与 Vue 路由协作的最佳实践指南

vue.js

2024-03-21 22:20:09

在 Docker Compose 中配置 nginx 与 Vue 路由协作的最佳实践

作为一名经验丰富的程序员和技术作家，我经常遇到各种各样的技术难题。今天，我想分享我解决的一个特定问题：在 Docker Compose 中配置 nginx 以与 Vue 路由无缝协作。

问题

在开发单页应用程序 (SPA) 时，将 nginx 与 Vue 路由集成至关重要。然而，配置 nginx 以正确处理 Vue 路由可能具有挑战性，导致 404 错误或其他问题。

解决方案

经过一番研究和尝试，我找到了解决此问题的最佳实践。以下是逐步指南：

1. 配置 nginx 配置文件

在 Docker Compose 的 nginx 服务中，更新 nginx 配置文件（/etc/nginx/conf.d/default.conf）以添加以下配置块：

location / {
    try_files $uri /index.html;
    proxy_pass http://client:8080;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

2. 构建 Docker Compose 文件

在 Docker Compose 文件中，更新 nginx 服务以使用更新后的配置：

services:
  nginx:
    image: nginx:latest
    restart: unless-stopped
    volumes:
      - ./data/nginx:/etc/nginx/conf.d
      - ./data/certbot/conf:/etc/letsencrypt
      - ./data/certbot/www:/var/www/certbot
    ports:
      - "80:80"
      - "443:443"
    depends_on:
      - client
    command: "/bin/sh -c 'while :; do sleep 6h & wait ${!}; nginx -s reload; done & nginx -g \"daemon off;\"'"

3. 更新 Vue 应用程序

在 Vue 应用程序中，将 Vue 路由器配置为使用 HTML5 历史模式：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 你的路由配置
  ]
})