Запуск Golang, Nginx и React App в Docker

Вы когда-нибудь сталкивались с проблемами совместимости при попытке запустить ваши приложения на Golang, Nginx и React локально? Решение простое — используйте Docker. Golang, Nginx и React в Docker вы можете даже использовать этот подход в продакшене, но остерегайтесь осуждений со стороны опытных программистов с длинными бородами.

В этой статье я расскажу вам о процессе запуска вашего приложения на Golang, Nginx и React в контейнере Docker. Это поможет избежать неудобств, связанных с управлением несколькими окружениями. Если вы читаете эту статью, вероятно, уже имеете некоторые знания о Docker, но не волнуйтесь, чтобы следовать инструкциям, вам не обязательно быть экспертом.

Приступим!

Настройка окружения

Если у вас еще нет установленного Docker, пришло время это сделать.

Кроме того, нам понадобится использовать Docker Compose, что необходимо для этого процесса. Не волнуйтесь, если ранее не работали с ним — начать использование очень просто.

Далее, создайте новый каталог на вашем компьютере для хранения файлов вашего приложения. Назовем его «docker-me-up-baby».

mkdir docker-me-up-baby
cd docker-me-up-baby

Zsh

Теперь создайте файл «docker-compose.yml«. В этом файле будут определены сервисы, составляющие ваше приложение, а также их конфигурации. Вот пример файла «docker-compose.yml» для нашего самого простого приложения:

version: '3'
services:
  web:
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - api
  api:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - api

Что здесь происходит?

Этот файл «docker-compose.yml» выполняет несколько действий:

Определяет четыре сервиса: web (для Nginx), api (для Golang), db (для PostgreSQL) и frontend (для React).
Задает контекст сборки для сервисов API и frontend, указывая Docker Compose, где найти соответствующие Dockerfile.
Конфигурирует отображение порта 80 сервиса web на порт 80 хост-машины для удобного доступа.
Открывает порт 3000 сервиса frontend на порт 3000 хост-машины.

Вы завершили настройку вашего окружения с помощью Docker Compose! Теперь всего одной командой вы можете собрать и запустить ваше приложение. Docker Compose обрабатывает создание образов, создание контейнеров и связь между сервисами, так что вам не нужно беспокоиться о деталях. Просто выполните команду:

docker-compose up

Zsh

Думаю, в данный момент это не сработает, но поверьте мне, это правильная команда.

Docker Compose запустит все сервисы, определенные в файле docker-compose.yml, и вы сможете получить доступ к вашему приложению, посетив http://localhost в вашем браузере.

Сборка и создание Docker-образа для простейшего API на Golang

Давайте реализуем нашу ракетную научно-техническую API.

// main.go
package main

import (
    "fmt"
    "net/http"
)

func main() {
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        fmt.Fprintf(w, "Hello, World!")
    })

    http.ListenAndServe(":8080", nil)
}

Это здорово, не так ли?!

Давайте создадим для нее Docker-образ (предполагается, что часть с кодом на Golang находится в корневом каталоге нашего проекта):

# Official Golang image (You shouldn't use the `latest` version in production but I'm a bad guy)
FROM golang:latest

# Working directory
WORKDIR /app

# Copy everything at /app
COPY . /app

# Build the go app
RUN go build -o main .

# Expose port
EXPOSE 8080

# Define the command to run the app
CMD ["./main"]

Dockerfile

Комментарии в этом файле объясняют, что происходит, и могут помочь вам понять это.

Давайте повторим еще раз:

Dockerfile использует официальный образ Golang.
Устанавливает рабочую директорию /app.
Копирует содержимое текущего каталога в каталог /app внутри контейнера.
Собирает приложение Golang с помощью команды go build.
Открывает порт 8080.
Определяет команду для запуска приложения (в данном случае ./main).

Чтобы создать Docker-образ для этого API на Golang, выполните следующую команду в каталоге вашего приложения (хотя мы не будем этого делать здесь):

docker-compose build api

Zsh

На самом деле, это нам не нужно, потому что мы позже соберем все сразу везде.

Мы будем использовать аналогичный подход для запуска нашего контейнера. Стоит отметить, что вы можете использовать эту команду для запуска контейнера.

docker-compose up api

Zsh

Но нам это не нужно в данный момент.

Если вы слишком нетерпеливы, вы можете выполнить вышеуказанные команды build и run. Вы можете быть уверены, что все в порядке, если увидите в консоли «Hello world!». Вы также можете получить доступ к API, посетив http://localhost:8080.

Вот и всё по созданию Docker-образа для простейшего API на Golang!

Продолжаем.

Настройка сервера Nginx (в Docker, конечно)

Поместим файлы Nginx в новый каталог с именем nginx внутри каталога приложения. Внутри каталога nginx создайте новый файл с именем nginx.conf со следующей конфигурацией:

server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://api:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Nginx

Эта конфигурация настраивает сервер Nginx на прослушивание порта 80 и перенаправление всех запросов на запущенное на порту 8080 Golang API. Почему здесь «api» в http://api:8080? Это имя сервиса Golang API, определенное в файле docker-compose.yml.

Чтобы собрать образ Nginx в Docker-контейнере, создайте новый файл с именем «Dockerfile» внутри каталога «nginx»:

# Official Nginx image (Yes, in this article I always use the `latest`. Kill me!)
FROM nginx:latest

# Copy Nginx configuration file to the container
COPY nginx.conf /etc/nginx/conf.d

# Expose port 80
EXPOSE 80

Dockerfile

Еще раз:

Этот «Dockerfile» использует официальный образ Nginx в качестве родительского образа.
Копирует файл конфигурации Nginx в контейнер.
Открывает порт 80.

Для сборки и запуска вы можете использовать те же команды, что и для контейнера Golang API, но с указанием имени сервиса «web«.

docker-compose build web
docker-compose up web

Zsh

Если вы запускаете сервисы Golang и Nginx с помощью «docker-compose up API web«, вы можете проверить работу приложения, посетив http://localhost в браузере.

Создайте React-приложение

В этой статье не рассматривается процесс сборки React-приложения. В качестве демонстрации мы используем простое приложение (из корневого каталога проекта)

npx create-react-app frontend
cd frontend

Zsh

Добавьте интеграцию с API

Добавьте простейшую интеграцию с API во всем мире. Создайте новый файл с именем «api.js» в каталоге «frontend/src»:

const api = {
  async getHello() {
    const response = await fetch('/api');
    const data = await response.json();
    return data.message;
  }
}

export default api;

JavaScript

Для разработки мы будем использовать Docker

frontend/Dockerfile:

# Use a Node.js image
FROM node:latest

# Set the working directory
WORKDIR /app

# Copy the package.json and package-lock.json files
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy everything to the container
COPY . .

# Expose port
EXPOSE 3000

Dockerfile

Этот Dockerfile

Получает образ Node.js.
Устанавливает рабочую директорию /app.
Копирует файлы package.json и package-lock.json в контейнер.
Устанавливает зависимости.

docker-compose build frontend
docker-compose up frontend

Zsh

Вы можете увидеть что-то по адресу http://localhost:3000

Давайте симулируем сборку для продакшн

Это просто демонстрация. В реальных проектах это самый плохой способ. В любом случае, выполним сборку.

npm run build

Zsh

Добавьте файлы сборки React в вашу конфигурацию Nginx.

Чтобы включить файлы сборки React в вашем сервере Nginx, создадим файл nginx.conf следующего содержания:

server {
    listen 80;
    server_name localhost;

    location / {
        root /app/frontend/build;
        try_files $uri /index.html;
    }

    location /api {
        proxy_pass http://api:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Nginx

Эта конфигурация настраивает сервер Nginx на обслуживание React-приложения из каталога сборки (build) и перенаправляет все запросы к API на Golang API, работающему на порту 8080.

И, наконец, внесем небольшую корректировку в docker-compose:

version: '3'
services:
  web:
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - api
    volumes:
      - frontend/build:/app/frontend/build
  api:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - api

Dockerfile

Поняли? Мы добавили volumes. Это привяжет наш каталог frontend/build к контейнеру Nginx.

Все вместе

Теперь, когда вы построили Docker-образы для вашего Golang API, сервера Nginx и React-приложения, пришло время запустить контейнер Docker и протестировать ваше приложение.

Запустите контейнер Docker:

docker-compose up

Zsh

Вы можете использовать

docker-compose up -d

Zsh

чтобы запустить его в фоновом режиме.

Проверьте приложение:

Чтобы протестировать ваше приложение, перейдите по адресу http://localhost в вашем браузере. Вы должны увидеть, что ваше React-приложение обслуживается сервером Nginx, а запросы к API перенаправляются к Golang API.

Также вы можете протестировать ваш Golang API, перейдя по адресу http://localhost/api в вашем браузере. Вы должны увидеть JSON-ответ с полем «message», содержащим текст «Hello, world!».

Остановите Golang, Nginx и React в Docker!

Остановите контейнер Docker: Чтобы остановить контейнер Docker, нажмите Ctrl + C в вашем терминале или выполните следующую команду, если вы использовали опцию -d:

docker-compose down

Zsh

Это остановит и удалит все контейнеры Docker для вашего приложения.

Поздравляю! Вы успешно создали и запустили контейнер Docker для вашего приложения на Golang, Nginx и React. Docker Compose упрощает процесс управления всеми сервисами вашего приложения и обеспечивает их беспрепятственную интеграцию.

Если вы хотите узнать больше о Docker и развертывании приложений, вот несколько дополнительных ресурсов, которые вы можете изучить:

Официальная документация Docker: Документация Docker представляет отличный ресурс для изучения использования Docker и Docker Compose. Она предоставляет огромное количество информации, включая руководства, учебные материалы и справочные материалы, как для начинающих, так и для опытных пользователей.
Docker Hub: Docker Hub — это широко используемый публичный репозиторий для хранения, обмена и управления образами контейнеров Docker. Он предоставляет удобное и централизованное место для поиска и доступа к заранее созданным образам для различных программ и сервисов. Пользователи также могут хранить свои собственные образы Docker на Docker Hub и делиться ими с другими.
Docker Stack — это инструмент, предоставляемый Docker, который позволяет развернуть многоконтейнерное приложение Docker на кластере Docker Swarm. Он позволяет определить службы, сети и тома вашего приложения в едином файле, называемом «Compose файлом», и развернуть весь стек на кластере. Kubernetes:
Kubernetes — это платформа для оркестрации контейнеров, которая автоматизирует развертывание, масштабирование и управление контейнеризованными приложениями. Это открытая система, которая обеспечивает эффективный способ управления и развертывания приложений в производственной среде, включая контейнеры Docker.

Вот и все, ребята! Надеюсь, моя статья поможет вам в вашем деловом процессе.

Опубликовано

29.03.2022

Backend

от

deneb

Метки:

docker, golang, howto, nginx, react, tutoriall

Запуск Golang, Nginx и React App в Docker

Настройка окружения

Сборка и создание Docker-образа для простейшего API на Golang

Настройка сервера Nginx (в Docker, конечно)

Создайте React-приложение

Добавьте интеграцию с API

Для разработки мы будем использовать Docker

Этот Dockerfile

Давайте симулируем сборку для продакшн

Все вместе

Запустите контейнер Docker:

Проверьте приложение:

Остановите Golang, Nginx и React в Docker!

Комментарии

Один комментарий на ««Запуск Golang, Nginx и React App в Docker»»

Добавить комментарий