前端项目部署方案-EW帮帮网

使用 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;
    }
}

2. 构建 Docker 镜像

在项目根目录下执行以下命令构建 Docker 镜像：

docker build -t my-vue3-app .

3. 运行 Docker 容器

构建好镜像后，使用以下命令运行 Docker 容器：

docker run -d -p 8080:80 my-vue3-app

这里将容器的 80 端口映射到主机的 8080 端口，你可以根据需要调整。

使用云平台部署（以 Vercel 为例）

1. 注册和登录 Vercel

访问 Vercel 官网注册并登录账号。

2. 关联代码仓库

将你的 Vue 3 项目代码托管到 GitHub、GitLab 或 Bitbucket 等代码托管平台。在 Vercel 中关联你的代码仓库。

3. 配置部署

Vercel 会自动检测到你的 Vue 3 项目，并提供默认的构建和部署配置。你可以根据需要进行自定义配置，例如指定构建命令和输出目录。

4. 部署项目

完成配置后，Vercel 会自动触发部署流程，部署完成后会提供一个访问链接，你可以在浏览器中访问该链接查看部署好的项目。

前端项目部署方案