当前位置：首页 > news >正文

前端项目部署方案

news 来源：原创 2025/5/24 16:16:07

使用 Nginx 部署到服务器

1. 上传文件

将本地项目构建生成的 dist 文件夹上传到服务器的指定目录，例如 /var/www/vue3-app。你可以使用 scp 命令进行上传：

scp -r dist user@server_ip:/var/www/vue3-app

其中 user 是服务器用户名，server_ip 是服务器的 IP 地址。

2. 安装和配置 Nginx

在服务器上安装 Nginx：

# Ubuntu/Debian
sudo apt-get update
sudo apt-get install nginx

# CentOS/RHEL
sudo yum install nginx

配置 Nginx 以指向你的项目文件。创建一个新的 Nginx 配置文件，例如 /etc/nginx/conf.d/vue3-app.conf：

server {
    listen 80;
    server_name your_domain_or_ip;  # 替换为你的域名或服务器 IP

    root /var/www/vue3-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 验证和重启 Nginx

验证 Nginx 配置文件的语法是否正确：

sudo nginx -t

如果语法正确，重启 Nginx 服务：

sudo systemctl restart nginx

现在，你可以在浏览器中访问你的域名或服务器 IP 来查看部署好的 Vue 3 项目。

使用 Docker 部署

1. 编写 Dockerfile

在项目根目录下创建一个 Dockerfile，内容如下：

# 基础镜像，使用 Node.js 作为构建环境
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 第二阶段，使用 Nginx 作为生产环境服务器
FROM nginx:1.23-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

同时，你可以创建一个 nginx.conf 文件来配置 Nginx：

server {
    listen 80;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}