nginx部署多个前后端项目

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了nginx部署多个前后端项目相关的知识，希望对你有一定的参考价值。

参考技术A http://127.0.0.1/helloworld    第一个vue项目(不用修改配置直接build就可以)

http:// 127.0.0.1 /test02   第二个vue项目(需要修改)

1、首先在config文件夹内的index.js内修改(注意是build内)

build:

    // Template for index.html

    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths

    assetsRoot: path.resolve(__dirname, '../dist'),

    assetsSubDirectory: 'static',

    //nginx配置

    assetsPublicPath: '/test2/',

    /**

    * Source Maps

    */

    productionSourceMap: true,

    // https://webpack.js.org/configuration/devtool/#production

    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as

    // Surge or Netlify already gzip all static assets for you.

    // Before setting to `true`, make sure to:

    // npm install --save-dev compression-webpack-plugin

    productionGzip: false,

    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to

    // View the bundle analyzer report after build finishes:

    // `npm run build --report`

    // Set to `true` or `false` to always turn it on or off

    bundleAnalyzerReport: process.env.npm_config_report

 



2、这样确保生产出来的文件，在index.html中都是在student下。对index.html文件进行修改，添加base href="/test2/" >

<!DOCTYPE html>

<html>

<head>

    <!--新添加的-->

    <base href="/test2/" >

    <meta charset=utf-8>

    <meta name=viewport content="width=device-width,initial-scale=1">

    <title>test1</title>

    <link href=/test2/static/css/app.abcac001105f87ab0ad14b37d34bbe9c.css rel=stylesheet>

</head>

<body>

<div id=app></div>

<script type=text/javascript src=/test2/static/js/manifest.a96262ba9edf9a4c5761.js></script>

<script type=text/javascript src=/test2/static/js/vendor.a6129cab87d1dbebc84c.js></script>

<script type=text/javascript src=/test2/static/js/app.4694a2e388440c566511.js></script>

</body>

</html>

3、在src/router/index.js文件修改，添加 base: '/test2/'

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router(

  base:"/test2/",

  mode:"history",

  routes: [

   

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

   

  ]

)

user root;

worker_processes  1;  #nginx进程个数

#worker_cpu_affinity 1000 0100 0010 0001;  #绑定worker进程到指定的CPU内核中

#error_log  logs/error.log;

#error_log  logs/error.log  notice;

#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events

    worker_connections  1024;  #worker进程的最大连接数是1024



http

    #include      mime.types;

    # include /etc/nginx/conf.d/*.conf;

    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

    #                  '$status $body_bytes_sent "$http_referer" '

    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;

    #tcp_nopush    on;

    #keepalive_timeout  0;

    keepalive_timeout  65;

    upstream rest

    least_conn;

    server 127.0.0.1:8000;

    server 127.0.0.1:8001;



    #gzip  on;

    server

        listen      80;

        server_name  127.0.0.1;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #vue第一个项目

      location /

            root  /usr/local/nginx/projects/dist;

            try_files $uri $uri/ @router;

            index  index.html index.htm;

       

        #vue第二个项目

        location /test2

            alias /usr/local/nginx/projects/test2/;

            try_files $uri $uri/ /test2/index.html;

            index  index.html index.htm;

       

        location @router

    rewrite ^.*$ /index.html last;



#vue第一个项目后端接口

        location /api_a

            #转发到后端uwsgi

                  proxy_pass http://127.0.0.1:5002;

                # 设置请求头，并将头信息传递给服务器端

                  proxy_set_header Host $host;

                # 设置请求头，传递原始请求ip给 gunicorn 服务器

                  proxy_set_header X-Real-IP $remote_addr;

                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

                #                                                                   

       

#vue第二个项目后端接口

        location /api_b

            #转发到后端uwsgi

                  proxy_pass http://127.0.0.1:5003;

                # 设置请求头，并将头信息传递给服务器端

                  proxy_set_header Host $host;

                # 设置请求头，传递原始请求ip给 gunicorn 服务器

                  proxy_set_header X-Real-IP $remote_addr;

                  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

                #                                                                   

       

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html

        #

        error_page  500 502 503 504  /50x.html;

        location = /50x.html

            root  html;

       

   

SpringBoot电商项目实战 — 前后端分离后的优雅部署及Nginx部署实现

在如今的SpringBoot微服务项目中，前后端分离已成为业界标准使用方式，通过使用nginx等代理方式有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多个客户展现端，例如：web端，安卓app，IOSapp，微信小程序等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。

 
技术图片
image

上图是简单的分布式微服务开发及前后端分离的示意图。展现层也就是所谓的前端（客户可直观看到的），比如电商项目前端包含：app（安卓和IOS）、微信小程序、PC商城、Web后台。后端是整个项目的核心，也就是系列项目中讲的内容，后端用Springboot+Dubbo实现分布式开发微服务落地，服务实现层的每一个服务都是一个独立部署的应用，并提供服务（Dubbo的提供者），接口层根据前端的请求，然后找对应的服务提供者消费服务。

在前后端分离的应用模式中，后端仅返回前端所需的数据，不再渲染HTML页面，不再控制前端的效果。至于前端用户看到什么效果，从后端请求的数据如何加载到前端中，都由前端自己决定，网页有网页的处理方式，各自有各自的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可。前端（Web项目）分离处理，都是从原先的JSP转成了Html静态页面。

Web项目部署容器的选取

目前常用的部署Web项目的容器用Tomcat、Apache、Nginx等，那我们前后端分离后的前端Html静态项目到底部署在那个应用容器呢？我们先看看这几个应用容器的区别。

Nginx,Apache,Tomcat的区别：

Nginx常用做静态内容服务和代理服务器，直接外来请求转发给后面的应用服务器（如tomcat）,而tomcat更多用来做一个应用容器。

1，Apache和nginx应该叫做HTTP Server，而tomcat是一个Application Server是一个Servlet/JSO应用的容器。

2，HTTP Server访问服务器上存储的资源（HTML文件，图片文件等），HTTP Server是中只是把服务器上的文件如实通过HTTP协议传输给客户端。

3，Application Server（应用服务器）往往是运行在HTTP Server的背后并执行应用，将动态的内容转化为静态的内容之后，通过HTTP Server分发到客户端。

4，Apache是同步多进程模型，一个连接对应一个进程，而nginx是一步的，多个连接（万级别）可以对应一个进程。nginx轻量级，抗并发，处理静态文件好。

根据对比，我们不难发现Nginx是较好的选择，它是由俄罗斯人（伊戈尔·赛索耶夫）开发的一款高性能的HTTP和反向代理web服务器。本身是轻量级、抗并发、能实现万级的连接等。同时它也是一个反向代理服务器。因此，我们不仅可以用它部署静态的html应用，还可以实现域名及访问地址的代理。

Nginx部署前端Web项目

Nginx的安装这里不做介绍，只说配置及部署相关内容。首先进入linux系统中Nginx的安装录的conf目录下，找到nginx.config配置文件，vim nginx.config进入编辑模式，在http下的server对应的同级编辑或添加如下代码，然后在root对应的目录下上传对应的html今天项目文件。注意：这里上传的如果是压缩包就需要解压，目录下要有index.html。

server

但我们的实际项目中，经常有多个Web端需要部署，如前面图中的例子，Web端有PC商城和Web后台系统，甚至可能更多，这些多个Web静态项目我们都放在nginx的html目录下的不同文件夹里，然后通过域名或ip+port代理到对应目录。下面就是多个Web项目在Nginx里的配置。

##商城Html页面

编辑完成后保存，并重启nginx服务 service nginx restart。

注：server_name 这里可配置域名或ip+端口号。

后端项目的部署

大家应该都知道，SpringBoot里集成了Tomcat容器，所有Springboot的项目部署，很是容易，根本不需要你还安装什么Tomcat、JBoss等应用。我们只需打成jar文件，上传到服务器，然后通过执行java -jar ***.jar &命令即可。

 
技术图片
image

但有没有人遇到过，你通过java -jar ***.jar &刚刚部署的服务，在你断开linux服务器的shell连接后服务就没了。大家有知道这是什么原因吗？这里给大家说说部署java jar文件命令的那点事。

1，java -jar ***.jar &

此命令可直接启动jar文件，是在当前会话进程中开启一个子进程来运行程序，这个子进程会随着会话进程的结束而结束。也就是说在你端口Shell连接回话结束，服务就跟着结束了。这种情况适合短时间测试用。

2，nohup java -jar ***.jar &

这里在说这个命令前先说两个名词，即：

  • hangup (挂断)，终端退出时会发送 hangup 信号来通知关闭所有子进程。

  • nohup(不挂断，忽略挂断信号)

nohup 的使用是十分方便的，只需在要处理的命令前加上 nohup 即可，标准输出和标准错误缺省会被重定向到 nohup.out 文件中。一般我们可在结尾加上"&"来将命令同时放入后台运行，也可用">filename2>&1"来更改缺省的重定向文件名。这种情况适合在生产环境长时间运行。

在生产环境如果你只用简单的jar部署，那一定得用*nohup java *命令启动应用。

 
  • 扫码关注公众号，发送关键词获取相关资料：
  1. 发送“Springboot”领取电商项目实战源码；
  2. 发送“SpringCloud”领取cloud学习实战资料；
 
技术图片

以上是关于nginx部署多个前后端项目的主要内容，如果未能解决你的问题，请参考以下文章

SpringBoot电商项目实战 — 前后端分离后的优雅部署及Nginx部署实现

nginx 同一端口部署多个项目

宝塔部署SpringBoot前后端不分离项目含域名访问部署数据库反向代理Nginx等配置

Linux部署前后端分离项目(SpringBoot+Vue)Nginx部署

linux下安装nginx部署多个前端项目

Nginx部署前后端项目时的跨域问题