Nginx如何代理Nuxt.js、Vue和API后端

本文发表于入职啦 (公众号: ruzhila) 可以访问https://www.ruzhila.cn 查看更多技术文章

网站架构

入职啦采用了Nuxt.js 、Vue3、Go的混合架构开发，包括了官网、简历工具、职位搜索、简历搜索等功能。为三个部分：

官网： 采用Nuxt.js + Vue3 + TailwindCSS 开发，属于SSR渲染
简历工具： 采用Vue3 + TailwindCSS 开发，属于SPA渲染
后端： 采用Gin + Gorm + MySQL 开发，提供API接口

为什么选择Nuxt.js

我们的官网希望提供比较友好的SEO支持，所以选择了Nuxt.js，Nuxt.js是一个基于Vue.js的SSR框架，通过服务端渲染Vue代码，这样普通的爬虫获取页面请求之后，不需要执行JS代码，就可以获取到完整的页面内容，保证了页面能被收录。

而我们主要的前端技术栈是Vue3，所以Nuxt.js是一个比较好的选择，可以快速搭建一个SEO友好的网站。

很多官网都是用Vue直接做SPA，但是这样的话，对SEO支持不太好，并且打开速度也会比较慢，如果是官网这种对SEO要求比较高的网站，还是建议使用Nuxt.js。

如果要把这三个部分合并到一个域名下，该怎么做？

先做了一个简单的网页目录结构规划：

/api/和/auth/ 访问Go的后端
/app/ 访问简历编辑器，输出是静态的HTML文件
其余部分访问Nuxt.js的官网, 比如/, /about, /blog等页面

这样，打开浏览器访问官网，默认就可以访问到Nuxt.js的官网，访问/app/就可以访问到简历编辑器，/app/里面会调用/api的接口。

也就是说，整个网站需要运行至少三个进程:

nginx 提供所有的流量入口，监听在80和443端口, 所有的流量先访问到nginx
nuxt.js 是一个Node服务,运行在127.0.0.1:3000，提供官网的SSR页面渲染
api 是一个Golang服务,运行在127.0.0.1:8080, 提供API服务，并且访问Redis和MySQL

这里的Redis和MySQL是api服务的依赖，不对外提供服务

Nginx配置

完整的Nginx配置如下，保存在/etc/nginx/conf.d/ruzhila.cn.conf文件中：

server {
    listen 80;    
    server_name ruzhila.cn www.ruzhila.cn;

    listen 443 ssl;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;
    ssl_certificate     /etc/nginx/conf.d/ruzhila.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/conf.d/ruzhila.cn.key;

    client_max_body_size 100m;
    root   /var/www/ruzhila;
    index  index.html index.htm;
    
    location ~^/(auth|api) {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:8080;
    }
    
    location /app {
        try_files $uri $uri/ /app/index.html;
    }
    
    location / {
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_pass http://127.0.0.1:3000;
    }
}

ruzhila.cn.conf放置到/etc/nginx/conf.d/目录下，这样nginx启动的时候会自动加载这个配置文件。

/var/www/ruzhila的目录结构

hello@ruzhila:/var/www/ruzhila$ tree -L 2
.
├── app
│   ├── favicon.ico
│   ├── font
│   ├── image
│   ├── index.html
│   ├── logo.svg
└── sitemap.xml

这个配置文件里面有几个重要的部分：

1. server 配置

server_name 这个配置文件只对ruzhila.cn和www.ruzhila.cn生效
client_max_body_size 配置了上传文件的最大大小，这里是100M, 避免上传文件过大
root 配置了静态文件的根目录，这里是/var/www/ruzhila，这个目录下现在并没有index.html*文件

2. 配置API服务

location ~^/(auth|api) 这个是一个正则表达式，匹配了/auth和/api开头的路径，这两个路径会被代理到http://127.0.0.1:8080, 也就是api服务

3. 配置SPA服务

location /app 这个是一个前缀匹配，匹配了/app开头的路径，这个路径都会访问/var/www/ruzhila/app/index.html文件
- try_files $uri $uri/ /app/index.html; 表示是如果找不到文件，比如访问/app/personal，就会访问/app/index.html文件
- 这是SPA最基本的配置选项

4. 配置Nuxt.js服务

location / 这个是一个前缀匹配，匹配了所有的路径，这个路径都会访问http://127.0.0.1:3000，也就是nuxt.js服务, 意味着除了/app和/auth和/api之外的所有路径都会访问nuxt.js服务

配置之后，nginx会根据路径的不同，将请求转发到不同的服务上，这样就实现了一个Nginx的代理服务。

5. 重启Nginx

最后，修好配置之后，不能直接重启nginx, 一定要先做配置文件的格式检查，然后再重启nginx:

hello@ruzhila:/etc/nginx# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

# 先检查配置文件是否正确， 如果有错误，会提示错误信息
# 如果没有错误，就可以重启nginx
hello@ruzhila:/etc/nginx# nginx -s reload

这样，就可以实现一个Nginx的代理服务，将不同的请求转发到不同的服务上，实现了一个网站混合部署架构。

总结

Nginx 是一个非常流行和高性能的HTTP代理服务器，可以实现反向代理、负载均衡、缓存等功能，是一个非常重要的基础设施组件。现代的网站架构中，SSR, SPA, API 是三个最常见的服务类型，通过Nginx的代理功能，可以将这三个服务整合到一个域名下，提供统一的访问入口。

如果大家对后端编程有兴趣，可以加入我们的实战项目交流群，一起学习后端编程。