前端项目部署（Nginx） | 青训营笔记

VII
151 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第16天，总结一下最近在项目部署阶段遇到的问题和最终的解决方案。

一、前言

我们的项目采用的是 Vue3 框架，用 Vite 进行项目搭建。在刚开始进行部署的时候由于缺乏部署相关的知识和经验所以走了不少的弯路：

  • 我们首先想到用 Github Pages，但是在尝试之后我们发现由于后端采用的 HTTP 协议，而 Github 构建的站点采用的 HTTPS 协议，因此会出现跨域的问题。同时由于我们采用的 Vue Router 的WebHistory模式，因此也无法正确地匹配路由；
  • 然后我们想到使用 Vite 的开发服务器，但是即便在运行pnpm run dev命令时加上--host 0.0.0.0参数，也只能在局域网内访问；
  • 接着我们又尝试了和 Github Pages 类似的 Vercel，结果在构建时出现了 Vercel 内部程序报错（我也不知道为什么 T^T）

最终我们选择了 Nginx 作为文件服务器，同时通过正向代理解决了跨域问题。接下来我将介绍如何使用 Nginx 完成一个前端项目的部署。

二、具体部署过程

因为我是在阿里云的服务器上进行部署，其系统版本是 Ubuntu 20.04，所以在这里我只讲解了 Nginx 在 Linux 上的安装和配置方法，其它系统的安装和配置方法大家可以去看官方文档或者别人分享的博客。

1. 安装 Nginx

首先我们需要先安装 Nginx：

sudo apt install nginx

查看 Nginx 是否安装成功：

nginx -v

或者我们在启动 Nginx 服务之后访问服务器 IP 能看到 Nginx 默认的欢迎页面也能证明我们安装成功了：

service nginx start

image.png

2. 相关配置

安装完成之后 Nginx 配置文件的位置是：/etc/nginx/nginx.conf

我们主要使用到的配置项是server，这是一个实例：

http {
    ...
    server {
        listen 80; # 文件服务器监听的端口号，http 服务默认为 80
        server_name xxx;
		
        location / {
                root /path/to/front-end/dist/;
                # index index.html;
                try_files $uri $uri/ /index.html;
        }

        location ^~ /api/ {
                proxy_pass http://127.0.0.1:3000/; # 后端的访问地址
                proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

我们重点来看一下 location 这个配置项：

  • location用于指定对符合某种规则的 URL 采用什么处理方式
  • location后面接的参数（在上面的例子中是/和^~ /api/）表示的则是 URL 的匹配规则
    • 常见的规则有：以=开头表示进行精确匹配，以^~开头表示需要匹配拥有指定前缀的 URL（注意^~和用于表示前缀的字符串中间有空格），/表示通用匹配即所有 URL 都可以匹配到
    • 当配置了多个location时采用首先=，其次^~，然后按照定义的顺序进行正则匹配，最后是/
  • 在location配置项内部定义的是完成 URL 匹配后的处理方式
    • 如果是文件服务器则主要有三种：root指定文件所在的目录，index指定访问根路由需要返回的文件（一般是 HTML 文件），try_files同样是指定返回的文件，但是其可以指定多种匹配本地文件的规则，访问时将依次查找文件直到对应的文件存在（用于解决 Vue Router WebHistory模式下的路由匹配问题）
    • 如果是配置正向代理，则可以使用proxy_pass指定目标 IP，proxy_set_header X-Real-IP $remote_addr允许目标服务器获取客户端的 IP

几个需要注意的地方：

  • 每条指令结尾都需要加上分号
  • 如果在运行 Nginx 时出现用户权限错误，可以将与http同级的user字段设置为root

3. 重启 Nginx

使用命令nginx -s reload让 Nginx 重新加载配置文件和重启服务

三、个人总结

从这次部署项目的经历来看我还是太缺乏部署相关的知识和经验了，但是最终还是通过查找相关资料和不断地摸索完成了最终的部署，收获还是很大的。以后有空的时候我还想研究一下自动化部署的方案，说不定能发现一些有趣的方案能减少一遍遍构建和部署中一直重复的操作。

四、引用参考

ubuntu安装nginx_ZywOo777的博客-CSDN博客_ubuntu安装nginx

nginx配置文件中的 location 配置详解 - 格桑梅朵儿 - 博客园 (cnblogs.com)

nginx各种代理配置_一枚攻城狮的博客-CSDN博客_nginx 代理配置

avatar
文章
阅读
粉丝