Docker轻松部署前端项目实战指南

最新推荐文章于 2025-12-03 20:31:34 发布

原创最新推荐文章于 2025-12-03 20:31:34 发布 · 161 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

服务器中使用Docker部署前端项目指南

在现代软件开发中，Docker已成为部署应用的重要工具。通过容器化技术，前端项目可以更高效地构建、测试和部署。以下内容详细介绍了如何在服务器上使用Docker部署前端项目。

准备工作

确保服务器已安装Docker和Docker Compose。可以通过以下命令检查安装情况：

docker --version
docker-compose --version

若未安装，参考官方文档安装Docker和Docker Compose。

创建前端项目

假设项目基于React，使用create-react-app初始化项目：

npx create-react-app my-frontend
cd my-frontend

项目结构如下：

my-frontend/
├── node_modules/
├── public/
├── src/
├── package.json
├── package-lock.json

编写Dockerfile

在项目根目录创建Dockerfile，用于构建前端镜像：

# 使用官方Node镜像作为基础
FROM node:18-alpine as builder

# 设置工作目录
WORKDIR /app

# 复制项目文件
COPY package*.json ./
RUN npm install

# 复制源代码并构建
COPY . .
RUN npm run build

# 使用Nginx作为生产环境服务器
FROM nginx:alpine

# 复制构建结果到Nginx目录
COPY --from=builder /app/build /usr/share/nginx/html

# 暴露80端口
EXPOSE 80

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

该Dockerfile分为两个阶段：

使用Node镜像安装依赖并构建项目。
使用Nginx镜像托管构建后的静态文件。

配置Nginx

默认Nginx配置可能不支持前端路由。在项目根目录创建nginx.conf文件：

server {
    listen 80;
    server_name localhost;

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

更新Dockerfile，复制