Приложение React обслуживает файлы ресурсов через Nginx и Docker - PullRequest
0 голосов
/ 21 октября 2019

Я пытаюсь развернуть свое приложение React с SSR, используя Docker, и я хочу обслуживать свои файлы активов через Nginx, а не экспресс. Теперь оно запускает приложение на 3000-м порту, но без загрузки JS-файлов, что означает, например, не работает реактивный маршрутизатор. В настоящее время я использую файлы ресурсов в Express в режиме разработки, но для производства мне нужно сделать это в Nginx. Это структура моих файлов сборки:

enter image description here

А вот мои файлы:

server / index.ts

import path from 'path'
import * as express from 'express'
import cors from 'cors'
import chalk from 'chalk'
import manifestHelpers from 'express-manifest-helpers'
import bodyParser from 'body-parser'
import paths from '../../config/paths'
import errorHandler from './middleware/errorHandler'
import serverRenderer from './middleware/serverRenderer'
import addStore from './middleware/addStore'

require('dotenv').config()

const app = express.default()

// Use Nginx or Apache to serve static assets in production or remove the if() around the following
// lines to use the express.static middleware to serve assets for production (not recommended!)

if (process.env.NODE_ENV === 'development')
  app.use(paths.publicPath, express.static(path.join(paths.clientBuild, paths.publicPath)))

app.use(cors())

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

app.use(addStore)

const manifestPath = path.join(paths.clientBuild, paths.publicPath)

app.use(
  manifestHelpers({
    manifestPath: `${manifestPath}/manifest.json`,
  })
)

app.use(serverRenderer())

app.use(errorHandler)

app.listen(process.env.PORT || 3000, () => {
  console.log(
    `[${new Date().toISOString()}]`,
    chalk.blue(`App is running: http://localhost:${process.env.PORT || 3000}`)
  )
})

export default app

DockerFile:

FROM ubuntu:16.04

# 80 = HTTP, 443 = HTTPS, 3000 = MEAN.JS server, 35729 = livereload, 8080 = node-inspector
EXPOSE 80 3000

# Install Utilities
RUN apt-get update -q  \
 && apt-get install -yqq \
 curl \
 git \
 ssh \
 gcc \
 make \
 build-essential \
 libkrb5-dev \
 sudo \
 vim \
 net-tools \
 apt-utils \
 supervisor \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Install nodejs
RUN curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
RUN sudo apt-get install -yq nodejs \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*

# Install and copy Nginx
RUN apt-get update \
    && apt-get install -y nginx

COPY ./nginx/nginx.conf /etc/nginx/sites-enabled/

# Copy supervisord conf
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

# Copy start script
COPY start.sh /

# Node deployment steps
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
RUN npm install && npm cache clean --force
COPY . /usr/src/app
RUN npm run build
CMD [ "/bin/sh", "/start.sh" ]

nginx / nginx.conf

server {
        listen 80;
        listen [::]:80;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name example.com www.example.com;

        location / {
                proxy_pass http://nodejs:8080;
        }

        location ~ /.well-known/acme-challenge {
                allow all;
                root /var/www/html;
        }
}

Start.sh

#!/bin/bash
# Starting Node 

cd /usr/src/app
nohup node build/server/server.js &
#Starting Nginx
/usr/bin/supervisord -n -c /etc/supervisor/supervisord.conf
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...