nuxt.js deployment and nginx reverse proxy configuration

demand:

Configured app directory points ProxyService on Ngxin: 8900 (NodeJS reverse proxy server).

1, nuxt.js service needs to be deployed to www.abc.com/app/draw

2, strapi service needs as api service nuxt applications deployed to www.abc.com/app/draw_api.

 

Implementation:

A, NGINX configuration ngxin.conf

server {
  
  # index.html
  location / {
    ...
  }
  # app上下文反向代理8900端口（代理服务器）
  location /app/ {
    proxy_pass http://127.0.0.1:8900;
    include proxy.conf;
  }
}

proxy.conf
--------------------------
proxy_http_version  1.1;
proxy_cache_bypass  $http_upgrade;
proxy_set_header Upgrade      $http_upgrade;
proxy_set_header Connection     "upgrade";
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_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;

　　

Step two: NodeJS proxy server, use http-proxy-middleware module implements the / app / draw / proxy service port 3000 to Nuxt

// proxyServer.js
const zProxy = proxy({
  target: 'http://localhost:3000',
  changeOrigin: true
})
// strapi服务
const zApiProxy = proxy({
  target: 'http://localhost:1337',
  changeOrigin: true
  pathRewrite: {
    '^/app/draw-api/': ''  # 使用 abc.com/app/draw-api/ 映射  localhost:3000
 }
})

const app = express()

app.get('/app/', function(req, res) {
  res.send('Welcome to the proxy service.')
})

app.use('/app/draw/', zProxy)
app.use('/app/draw-api', zApiProxy)

　　

Third: Nuxt Configuration

The key is router.base line

Nuxt.config.js 
--------------
  server: {
    port: 3000,
    host: 'localhost'
  },
  mode: 'universal',
  router: {
    base: '/app/draw/'
  }