Stellen Sie NextJs und NestJs als einzelne Anwendung bereit-js-Tutorial-php.cn

Hallo! Ich freue mich, Ihnen mitteilen zu können, wie Sie NestJS so konfigurieren können, dass es nahtlos auf einem einzelnen Host funktioniert. Aber lassen Sie mich zunächst erklären, warum dieses Setup so lange meine erste Wahl für die Verwaltung von Frontend und Backend war.

Next.js ist ein Kraftpaket, wenn es darum geht, neue Projekte zu starten. Es ist vollgepackt mit Funktionen wie integriertem Routing, serverseitigem Rendering (SSR) und Caching, die Ihnen den Einstieg erleichtern. Darüber hinaus verfügt Next.js über eigene interne API-Funktionen, mit denen Sie Aufgaben wie Caching und Datenvorbereitung direkt im Framework verwalten können. Das bedeutet, dass Sie sich mehr auf die Entwicklung Ihrer App konzentrieren können und weniger auf die Einrichtung der Infrastruktur.

Aber manchmal braucht man etwas Leistungsstärkeres für den Server. Hier kommt Nest.js ins Spiel. Dieses Framework ist so leistungsstark, dass es nicht nur die Middleware-Aufgaben zwischen Ihrem Backend und Frontend übernehmen kann, sondern auch als eigenständige, robuste Backend-Lösung fungieren kann. Daher ist NestJS in diesem Fall eine gute Ergänzung zu Next.js und ermöglicht die Verwendung einer einzigen Programmiersprache für Frontend und Backend.

Warum ein einzelner Host?

Einfach ausgedrückt ist es unglaublich praktisch. Mit nur einem Git Pull und einem Docker-Compose Up -d können Sie loslegen. Sie müssen sich keine Gedanken über CORS oder das Jonglieren von Ports machen. Darüber hinaus wird der Lieferprozess optimiert, sodass alles reibungsloser und effizienter abläuft. Als Nachteil kann ich darauf hinweisen, dass dies für große Projekte mit hoher Auslastung nicht geeignet ist.

1. Definieren wir zunächst die Ordnerstruktur Ihres Repositorys

Deploy NextJs and NestJs as a single application

2. Lassen Sie uns eine Docker-Datei für den Server deklarieren

Datei: ./docker-compose.yml

services:
    nginx:
        image: nginx:alpine
        ports:
            - "80:80"
        volumes:
            - "./docker/nginx/conf.d:/etc/nginx/conf.d"
        depends_on:
            - frontend
            - backend
        networks:
            - internal-network
            - external-network

    frontend:
        image: ${FRONTEND_IMAGE}
        restart: always
        networks:
            - internal-network

    backend:
        image: ${BACKEND_IMAGE}
        environment:
            NODE_ENV: ${NODE_ENV}
            POSTGRES_HOST: ${POSTGRES_HOST}
            POSTGRES_USER: ${POSTGRES_USER}
            POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
            POSTGRES_DB: ${POSTGRES_DB}
        depends_on:
            - postgres
        restart: always
        networks:
            - internal-network

    postgres:
        image: postgres:12.1-alpine
        container_name: postgres
        volumes:
            - "./docker/postgres:/var/lib/postgresql/data"
        environment:
            POSTGRES_USER: ${POSTGRES_USER}
            POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
            POSTGRES_DB: ${POSTGRES_DB}
        ports:
            - "5432:5432"

networks:
    internal-network:
        driver: bridge

    external-network:
        driver: bridge

Nach dem Login kopieren

3. Eine weitere Docker-Datei für den Entwicklungsmodus

Für den Entwicklungsmodus benötigen wir keinen Containerdienst für das Backend und Frontend, da wir sie lokal ausführen.

Datei: ./docker-compose.dev.yml

version: '3'

services:
    nginx:
        image: nginx:alpine
        ports:
            - "80:80"
        volumes:
            - "./docker/nginx/conf.d:/etc/nginx/conf.d"

    postgres:
        image: postgres:12.1-alpine
        container_name: postgres
        volumes:
            - "./docker/postgres:/var/lib/postgresql/data"
        environment:
            POSTGRES_USER: postgres
            POSTGRES_PASSWORD: postgres
            POSTGRES_DB: postgres
        ports:
            - "5432:5432"

Nach dem Login kopieren

4. Docker-Datei für Backend

Datei: ./backend/Dockerfile

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json ./
RUN  npm install

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder --chown=nextjs:nodejs /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

RUN mkdir -p /app/backups && chown -R nextjs:nodejs /app/backups && chmod -R 777 /app/backups

USER nextjs

EXPOSE 3010

ENV PORT 3010

CMD ["node", "dist/src/main"]

## 5. Docker file for frontend
File: ./frontend/Dockerfile

FROM node:18-alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json ./
RUN  npm install

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

ENV PORT 3000

CMD ["npm", "start"]

Nach dem Login kopieren

6. Ngnix-Konfiguration

In diesem Schritt konfigurieren wir Nginx so, dass es als Reverse-Proxy für unser Next.js-Frontend und Nest.js-Backend fungiert. Mit der Nginx-Konfiguration können Sie Anfragen nahtlos zwischen Frontend und Backend weiterleiten und sie gleichzeitig vom selben Host bedienen.

Datei: /docker/nginx/conf.d/default.conf

server {
    listen 80;

    location / {
        proxy_pass http://host.docker.internal:3000;
        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;
    }

    location /api {
        proxy_pass http://host.docker.internal:3010;
        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;
    }
}

Nach dem Login kopieren

Diese Konfiguration überwacht Port 80 und leitet den allgemeinen Datenverkehr an das Next.js-Frontend an Port 3000 weiter, während alle Anfragen an /api an das Nest.js-Backend an Port 3010 weitergeleitet werden.

7. Globales Prägix von NestJ

Da wir denselben Host verwenden, müssen NestJs auf /apipath verfügbar sein. Dazu müssen wir GlobalPrefix — API.

festlegen

Datei: ./backend/src/main.js

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule, { cors: true  });
  app.setGlobalPrefix('api');
  await app.listen(3010);
}
bootstrap();

Nach dem Login kopieren

8. Frontend

Auf dem Frontend ist keine Konfiguration erforderlich, sondern es muss nur berücksichtigt werden, dass alle Serveranfragen relativ zum /api-Pfad aufgerufen werden sollten.

9. Lokal ausführen

CD-Frontend
npm run dev
cd ../backend
npm run start:dev
cd ../
docker-compose -f docker-compose.dev.yml up -d

Jetzt können wir unsere Website überprüfen, indem wir localhost im Browser öffnen. Im Beispiel haben wir eine Anfrage auf dem Server und eine weitere auf dem Client. Beide Anfragen werden von Next.Js aufgerufen und von Nest.Js verarbeitet.

Deploy NextJs and NestJs as a single application

10. Über GitHub auf dem Server bereitstellen und ausführen

In diesem Artikel wird erläutert, wie Sie mithilfe von Docker Registry und GitHub Actions ein Projekt auf einem Server bereitstellen. Der Prozess beginnt mit der Erstellung von Docker-Images sowohl für das Backend als auch für das Frontend in der Docker-Registrierung. Danach müssen Sie ein GitHub-Repository einrichten und die notwendigen Geheimnisse für eine nahtlose Bereitstellung konfigurieren:

DOCKERHUB_USERNAME
DOCKERHUB_TOKEN
DOCKER_FRONTEND_IMAGE
DOCKER_BACKEND_IMAGE
REMOTE_SERVER_HOST
REMOTE_SERVER_USERNAME
REMOTE_SERVER_SSH_KEY
REMOTE_SERVER_SSH_PORT

Der Nachteil der Verwendung eines Repositorys für das Backend und das Frontend ist, dass jedes Mal, wenn Sie etwas pushen, beide Images neu erstellt werden. Um es zu optimieren, können wir diese Bedingungen verwenden:

if: contains(github.event_name, ‘push’) && !startsWith(github.event.head_commit.message, ‘frontend’)

Nach dem Login kopieren

if: contains(github.event_name, ‘push’) && !startsWith(github.event.head_commit.message, ‘backend’)

Nach dem Login kopieren

Es ermöglicht die Neuerstellung nur des Bildes, das Sie beachten, indem Sie die Commit-Nachricht angeben.

File: ./github/workflows/deploy.yml

name: deploy nextjs and nestjs to GITHUB

on:
  push:
    branches: [ "main" ]

jobs:
  build-and-push-frontend:
    runs-on: ubuntu-latest

    if: contains(github.event_name, 'push') && !startsWith(github.event.head_commit.message, 'backend')

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Login to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push frontend to Docker Hub
        uses: docker/build-push-action@v2
        with:
          context: frontend
          file: frontend/Dockerfile
          push: true
          tags: ${{ secrets.DOCKER_FRONTEND_IMAGE }}:latest

      - name: SSH into the remote server and deploy frontend
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.REMOTE_SERVER_HOST }}
          username: ${{ secrets.REMOTE_SERVER_USERNAME }}
          password: ${{ secrets.REMOTE_SERVER_SSH_KEY }}
          port: ${{ secrets.REMOTE_SERVER_SSH_PORT }}
          script: |
            cd website/
            docker rmi -f ${{ secrets.DOCKER_FRONTEND_IMAGE }}:latest
            docker-compose down
            docker-compose up -d

  build-and-push-backend:
    runs-on: ubuntu-latest

    if: contains(github.event_name, 'push') && !startsWith(github.event.head_commit.message, 'frontend')

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Login to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      - name: Build and push backend to Docker Hub
        uses: docker/build-push-action@v2
        with:
          context: backend
          file: backend/Dockerfile
          push: true
          tags: ${{ secrets.DOCKER_BACKEND_IMAGE }}:latest

      - name: SSH into the remote server and deploy backend
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.REMOTE_SERVER_HOST }}
          username: ${{ secrets.REMOTE_SERVER_USERNAME }}
          password: ${{ secrets.REMOTE_SERVER_SSH_KEY }}
          port: ${{ secrets.REMOTE_SERVER_SSH_PORT }}
          script: |
            cd website/
            docker rmi -f ${{ secrets.DOCKER_BACKEND_IMAGE }}:latest
            docker-compose down
            docker-compose up -d=

Nach dem Login kopieren

Repository: https://github.com/xvandevx/blog-examples/tree/main/nextjs-nestjs-deploy

Recap

This article is a hands-on guide to deploying Next.js and Nest.js together on a single server, making it a go-to solution for developers who want a streamlined setup. By combining the strengths of Next.js for frontend and Nest.js for backend, I showed how to efficiently manage both parts of your application using Docker and GitHub Actions. It simplifies the deployment process, allowing you to focus on building your app rather than juggling multiple configurations. Perfect for those looking to get a full-stack project up and running quickly with minimal hassle.

Das obige ist der detaillierte Inhalt vonStellen Sie NextJs und NestJs als einzelne Anwendung bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!