Как захостить статику из билда в контейнере?

Чтобы захостить статический контент из билда в контейнере Node.js, можно использовать различные подходы, включая запуск сервера Express внутри контейнера или использование специализированных инструментов, таких как Nginx.

Одним из вариантов является запуск сервера Express внутри контейнера. Для этого вам потребуются следующие шаги:

1. Установите Express и зависимости вашего проекта через npm:

npm install express

2. Создайте файл server.js, в котором вы определите логику запуска сервера Express:

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

В этом примере мы используем Express для создания сервера и express.static для обслуживания статики из папки build. Также мы определили маршрут для отправки файла index.html, который будет использоваться как точка входа для вашего статического контента.

3. Создайте Dockerfile для сборки и запуска контейнера:

FROM node:latest

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD [ "node", "server.js" ]

4. Скопируйте файлы из вашего проекта в контейнер и запустите сборку и запуск сервера:

docker build -t <your-image-name> .
docker run -p 3000:3000 -d <your-image-name>

После запуска контейнера вы сможете получить доступ к вашему статическому контенту, открыв localhost:3000 в браузере.

Еще одним распространенным способом является использование Nginx в качестве обратного прокси-сервера для обслуживания статики из билда. В таком случае ваш Dockerfile будет выглядеть иначе, и вам придется настроить конфигурацию Nginx:

1. Создайте Dockerfile для сборки контейнера Node.js и установите Nginx:

FROM node:latest as build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:stable-alpine

COPY --from=build /app/build /usr/share/nginx/html

EXPOSE 80

CMD [ "nginx", "-g", "daemon off;" ]

В этом примере мы сначала собираем статические файлы в контейнере Node.js, а затем копируем их в контейнер Nginx.

2. Создайте конфигурацию Nginx для обслуживания статики, создав файл nginx.conf в корневой папке вашего проекта:

server {
  listen 80;
  server_name localhost;

  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

В этом примере мы создали сервер Nginx, который слушает порт 80 и добавили локацию для обслуживания статики из директории /usr/share/nginx/html.

3. Обновите Dockerfile, чтобы скопировать конфигурацию Nginx в контейнер:

FROM node:latest as build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:stable-alpine

COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD [ "nginx", "-g", "daemon off;" ]

4. Скопируйте файлы из вашего проекта в контейнер и запустите сборку и запуск контейнера:

docker build -t <your-image-name> .
docker run -p 80:80 -d <your-image-name>

Теперь ваш статический контент должен быть доступен по адресу localhost в браузере.

Это два основных подхода для размещения статики из билда в контейнере. Выбор метода зависит от ваших потребностей и предпочтений.