前端项目打包部署

打包和部署前端项目是将开发环境中的代码转化为生产环境可直接运行的静态文件，并将其部署到服务器上的过程。

# 项目打包
pnpm run build

# 上传文件至远程服务器
将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

# nginx.cofig 配置
server {
    listen     80;
    server_name  localhost;
    location / {
            root /usr/share/nginx/html;
            index index.html index.htm;
    }
    # 反向代理配置
    location /prod-api/ {
      # api.youlai.tech 替换后端API地址，注意保留后面的斜杠 /
      proxy_pass http://api.youlai.tech/; 
    }
}

1. 前端项目打包

以 Vue 项目为例，一般来说，打包是把项目中的源代码转换成压缩过的、可以直接在浏览器中运行的 HTML、CSS、JS 等文件。

pnpm run build

1.1 命令解释

• 编译代码: 将 Vue 文件（.vue），JS（.js），CSS（.css）等代码通过打包工具（例如 Vite、Webpack）编译成普通的 HTML、CSS 和 JavaScript 文件。
• 压缩优化: 通过工具压缩文件体积，比如移除空格、注释，合并代码块等，减少网络传输量。
• 输出到 dist 目录: 编译完成的文件会放在 dist 目录中，这个目录包含了项目的所有静态文件，直接可以被服务器用于部署。

1.2 打包文件内容

• index.html: 前端页面的入口文件。
• assets/: 静态资源文件（CSS、图片、字体等）。
• js/: 编译后的 JavaScript 文件。

2. 上传打包文件到服务器

打包完成后，需要将

dist

目录中的所有文件上传到远程服务器。常用的工具和方法包括：

（1）SCP (安全拷贝协议)

（2）SFTP: 可以使用 WinSCP、FileZilla 等工具，手动上传文件至服务器。

（3）CI/CD 管道: 如果项目配置了 CI/CD，可以自动化部署流程。

由于这部操作实现并不复杂，我就直接将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

3. Nginx 配置

当文件上传到服务器后，需要通过 Nginx 进行部署和服务。Nginx 是一个常用的 Web 服务器，用于处理 HTTP 请求并提供静态文件服务。

3.1 基本的 Nginx 配置

server {
    listen     80;  # 监听 80 端口，通常是 HTTP 默认端口
    server_name  localhost;  # 服务器的域名或 IP 地址
    
    location / {
        root /usr/share/nginx/html;  # 指定静态文件根目录
        index index.html index.htm;  # 默认打开的首页文件
    }
}

• listen 80: 监听服务器的 80 端口，通常是 HTTP 的默认端口号。
• server_name: 定义了服务器的名称或 IP 地址，当用户访问该地址时会触发此服务器配置。
• location /: 配置根路径的请求时如何处理，root /usr/share/nginx/html 指定了静态资源文件的路径，Nginx 会从这个路径返回 index.html 页面。

3.2 反向代理配置（解决跨域问题）

前端和后端通常是分离部署的，也就是说，前端页面可能通过 AJAX 请求后端接口。如果前端页面和后端 API 处于不同的域名或端口时，浏览器会产生 跨域请求 问题。

为了解决跨域问题，可以通过 Nginx 设置反向代理。

server {
    listen     80;
    server_name  localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }

    # 反向代理配置
    location /prod-api/ {
        # 将前端 `/prod-api/` 请求代理到后端 API 地址
        proxy_pass http://api.youlai.tech/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

• proxy_pass http://api.youlai.tech/: 将所有以 /prod-api/ 开头的请求代理到指定的后端 API 地址。在前端代码中，发起 AJAX 请求时只需调用 /prod-api/，Nginx 会把请求转发给后端服务地址 http://api.youlai.tech/。
• proxy_set_header: 这部分配置设置了 Nginx 如何处理 HTTP 请求头。通常这是为确保客户端的请求 IP 和协议可以正确地传递给后端服务器。

4. 打开页面

在完成上述操作之后，打开浏览器并访问服务器 IP 或域名，例如：

http://<your-server-ip>/

就可以看到前端页面了。

如果设置了反向代理，在前端调用

/prod-api/

路径的 API 时，Nginx 会将请求转发给指定的后端服务器。

5. 总结

1. 项目打包: 使用 pnpm run build 将项目转换为可供生产环境使用的静态文件，输出到 dist 目录。
2. 上传文件:将本地打包生成的 dist 目录下的文件拷贝到服务器的 /usr/share/nginx/html 目录。
3. Nginx 配置: 配置 Nginx，设置静态文件路径以及反向代理，解决跨域问题。
4. 访问项目: 通过服务器 IP 或域名访问项目。