Docker 部署 Vue.js + Nginx 解决 404 问题
背景
Vue.js 是一款流行的前端框架，而 Nginx 则是一款高性能的 Web 服务器。在使用 Docker 部署 Vue.js 应用时，经常会遇到 404 页面找不到的问题。本文将介绍如何使用 Docker 部署 Vue.js 和 Nginx，并解决 404 问题。
准备工作
在开始部署之前，你需要确保已经安装了 Docker 和 Docker Compose。如果还没有安装，请先安装这两个工具。
步骤
1. 创建 Vue.js 项目
首先，我们需要创建一个 Vue.js 项目。可以使用 Vue CLI 来快速生成一个项目。在终端中运行以下命令：
$ vue create my-vue-app
这将创建一个名为 my-vue-app 的新 Vue.js 项目。
2. 配置 Nginx
我们需要为 Nginx 创建一个配置文件，以确保正确处理路由请求。在 Vue.js 项目的根目录中创建一个名为 nginx.conf 的文件，内容如下：
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
上述配置文件指定了 Nginx 监听在 80 端口，并将根目录设置为 /usr/share/nginx/html。在 location 部分，我们使用了 try_files 指令来处理路由请求。这将尝试匹配请求的文件，如果找不到，则返回 index.html。
3. 编写 Dockerfile
接下来，我们需要编写一个 Dockerfile 来构建 Docker 镜像。在项目根目录中创建一个名为 Dockerfile 的文件，并添加以下内容：
# 使用 Node.js 镜像作为基础
FROM node:14 as build
# 设置工作目录
WORKDIR /app
# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json ./
# 安装依赖
RUN npm install
# 复制所有文件到工作目录
COPY . .
# 构建 Vue.js 应用
RUN npm run build
# 使用 Nginx 镜像作为基础
FROM nginx:1.21
# 将 Nginx 配置文件替换为我们自己的配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 从上一个镜像中复制构建好的 Vue.js 应用到 Nginx 静态文件目录
COPY --from=build /app/dist /usr/share/nginx/html
上述 Dockerfile 使用 Node.js 镜像作为构建镜像的基础，并设置工作目录为 /app。然后复制 package.json 和 package-lock.json 文件，并安装依赖。接下来，将所有文件复制到工作目录，并构建 Vue.js 应用。最后，使用 Nginx 镜像作为最终镜像的基础，并替换默认的 Nginx 配置文件为我们自己的配置文件。然后，将构建好的 Vue.js 应用复制到 Nginx 的静态文件目录。
4. 编写 docker-compose.yml
最后，我们需要编写一个 docker-compose.yml 文件来定义我们的 Docker 服务。在项目根目录中创建一个名为 docker-compose.yml 的文件，并添加以下内容：
version: '3'
services:
web:
build:
context: .
dockerfile: Dockerfile
ports:
- "8080:80"
上述 docker-compose.yml 文件定义了一个名为 web 的服务。通过 build 字段，我们指定了使用当前目录下的 Dockerfile 来构建该服务。然后，我们将容器的 80 端口映射到主机的 8080 端口。
5. 构建和运行 Docker 容器
完成以上步骤后，我们可以通过以下命令构建和运行 Docker 容器：
$ docker-compose up -d
这将会构建镜像并运行容器。在容器成功启动后，
