Nginx给Vue和Java后端做代理

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

网站架构

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

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

为什么选择Nuxt.js

我们的官网希望提供比较友好的SEO支持,所以选择了Nuxt.jsNuxt.js是一个基于Vue.jsSSR框架,通过服务端渲染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 提供所有的流量入口,监听在80443端口, 所有的流量先访问到nginx
  • nuxt.js 是一个Node服务,运行在127.0.0.1:3000,提供官网的SSR页面渲染
  • api 是一个Golang服务,运行在127.0.0.1:8080, 提供API服务,并且访问RedisMySQL

这里的RedisMySQLapi服务的依赖,不对外提供服务

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.cnwww.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的代理功能,可以将这三个服务整合到一个域名下,提供统一的访问入口。

如果大家对后端编程有兴趣,可以加入我们的实战项目交流群

入群学习

关注公众号:入职啦 每日分享有用的知识

  • 36
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的示例代码,展示了如何使用Nginx部署Vue和Spring Boot应用: 1. Vue前端部分: 在Vue项目的`config/index.js`文件中,设置Vue前端的构建输出路径为`dist`目录: ```javascript module.exports = { // ... build: { // ... assetsRoot: path.resolve(__dirname, '../dist'), // ... }, // ... }; ``` 使用命令构建Vue前端项目: ```bash npm run build ``` 将生成的静态文件复制到Nginx的静态文件目录,例如`/var/www/html`: ```bash cp -r dist/* /var/www/html ``` 2. Spring Boot后端部分: 使用Maven或Gradle将Spring Boot项目打包成可执行的jar文件。 上传打包好的jar文件到服务器中的某个目录,例如`/opt/springboot`。 3. Nginx配置部分: 编辑Nginx配置文件`/etc/nginx/nginx.conf`,添加一个新的server配置块: ```nginx server { listen 80; server_name your-domain.com; # Vue前端静态文件 location / { root /var/www/html; index index.html; try_files $uri $uri/ /index.html; } # Spring Boot后端接口 location /api { proxy_pass http://localhost:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` 在上述配置中,将Vue前端的静态文件放在根路径`/`下,将Spring Boot后端的接口放在`/api`路径下,并使用`proxy_pass`指令将请求转发到Spring Boot后端的地址和端口。 保存并退出Nginx配置文件后,重新加载Nginx配置: ```bash sudo service nginx reload ``` 4. 启动应用: 启动Spring Boot应用: ```bash java -jar /opt/springboot/your-springboot-app.jar ``` 启动Nginx服务: ```bash sudo service nginx start ``` 通过访问你的域名或服务器IP,即可访问Vue前端应用,并通过`/api`路径访问Spring Boot后端接口。 请注意根据你的实际情况修改以上示例代码中的路径和配置信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值