Gunakan NextJs dan NestJs sebagai satu aplikasi

Hei! Saya teruja untuk berkongsi cara anda boleh mengkonfigurasi NestJS untuk berfungsi dengan lancar pada satu hos. Tetapi pertama-tama, izinkan saya menerangkan sebab persediaan ini menjadi pilihan utama saya untuk mengurus kedua-dua bahagian hadapan dan bahagian belakang sejak sekian lama.

Next.js ialah kuasa besar dalam hal memulakan projek baharu. Ia datang padat dengan ciri seperti penghalaan terbina dalam, pemaparan sisi pelayan (SSR) dan caching yang membantu anda mencapai tahap permulaan. Selain itu, Next.js mempunyai keupayaan API dalaman sendiri, membolehkan anda mengurus tugas seperti caching dan persediaan data terus dalam rangka kerja. Ini bermakna anda boleh lebih menumpukan pada membina apl anda dan kurang pada menyediakan infrastruktur.

Tetapi kadangkala anda memerlukan sesuatu yang lebih berkuasa untuk pelayan. Di situlah Nest.js melangkah masuk. Rangka kerja ini sangat berkuasa sehingga ia boleh mengendalikan bukan sahaja tugas perisian tengah antara bahagian belakang dan bahagian hadapan anda, tetapi juga boleh bertindak sebagai penyelesaian bahagian belakang yang teguh dengan sendirinya. Oleh itu NestJS ialah tambahan yang baik kepada Next.js dalam kes ini membenarkan penggunaan bahasa pengaturcaraan tunggal untuk bahagian hadapan dan bahagian belakang.

Mengapa hos tunggal?

Ringkasnya, ia sangat mudah. Dengan hanya tarikan git dan docker-compose up -d, anda sudah bersedia untuk pergi. Tidak perlu risau tentang CORS atau juggling port. Selain itu, ia menyelaraskan proses penghantaran, menjadikan semuanya berjalan dengan lebih lancar dan cekap. Sebagai kelemahan, saya boleh nyatakan bahawa ini tidak sesuai dengan projek besar dengan beban yang tinggi.

1. Mula-mula, mari kita tentukan struktur folder repositori anda

2. Mari kita isytiharkan fail docker untuk pelayan

Fail: ./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

Ringkasnya, ia sangat mudah. Dengan hanya tarikan git dan docker-compose up -d, anda sudah bersedia untuk pergi. Tidak perlu risau tentang CORS atau juggling port. Selain itu, ia menyelaraskan proses penghantaran, menjadikan semuanya berjalan dengan lebih lancar dan cekap. Sebagai kelemahan, saya boleh nyatakan bahawa ini tidak sesuai dengan projek besar dengan beban yang tinggi.

3. Satu lagi fail docker untuk mod pembangunan

Untuk mod pembangunan, kami tidak memerlukan perkhidmatan kontena untuk bahagian belakang dan bahagian hadapan kerana kami akan menjalankannya secara setempat.

Fail: ./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"

4. Fail Docker untuk bahagian belakang

Fail: ./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"]

6. Konfigurasi Ngnix

Dalam langkah ini, kami mengkonfigurasi Nginx untuk bertindak sebagai proksi terbalik untuk bahagian hadapan Next.js dan bahagian belakang Nest.js kami. Konfigurasi Nginx membolehkan anda menghalakan permintaan dengan lancar antara bahagian hadapan dan bahagian belakang, semuanya sambil menyampaikannya daripada hos yang sama.

Fail: /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;
    }
}

Konfigurasi ini mendengar pada port 80 dan mengarahkan trafik umum ke bahagian hadapan Next.js pada port 3000, manakala sebarang permintaan kepada /api dimajukan ke bahagian belakang Nest.js pada port 3010.

7. Pregix global NestJs

Memandangkan kami menggunakan hos yang sama, kami memerlukan NestJs tersedia di /apipath. Untuk melakukan ini, kita perlu setGlobalPrefix — API.

Fail: ./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();

8. Bahagian hadapan

Tiada konfigurasi diperlukan pada bahagian hadapan tetapi hanya mengambil kira bahawa semua permintaan pelayan harus dipanggil relatif kepada laluan /api.

9. Jalankan secara tempatan

cd hadapan
npm run dev
cd ../belakang
npm run start:dev
cd ../
docker-compose -f docker-compose.dev.yml up -d

Kini, kami boleh menyemak tapak web kami dengan membuka localhost dalam penyemak imbas. Dalam contoh, kami mempunyai 1 permintaan pada pelayan dan satu lagi pada klien. Kedua-dua permintaan ini dipanggil dari Next.Js dan diproses oleh Nest.Js.

10. Sebarkan dan jalankan pada pelayan melalui GitHub

Artikel ini meneroka cara untuk menggunakan projek ke pelayan menggunakan Docker Registry dan Tindakan GitHub. Proses ini bermula dengan mencipta imej Docker untuk kedua-dua bahagian belakang dan bahagian hadapan dalam Pendaftaran Docker. Selepas itu, anda perlu menyediakan repositori GitHub dan mengkonfigurasi rahsia yang diperlukan untuk penggunaan yang lancar:

DOCKERHUB_USERNAME
DOCKERHUB_TOKEN
DOCKER_FRONTEND_IMAGE
DOCKER_BACKEND_IMAGE
REMOTE_SERVER_HOST
REMOTE_SERVER_USERNAME
REMOTE_SERVER_SSH_KEY
REMOTE_SERVER_SSH_PORT

Bahagian belakang menggunakan satu repositori untuk bahagian belakang dan bahagian hadapan ialah setiap kali anda menolak sesuatu, kedua-dua imej itu dibina semula. Untuk mengoptimumkannya, kita boleh menggunakan syarat ini:

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

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

Ia membolehkan anda membina semula hanya imej yang anda perhatikan dengan menyatakan mesej komit.

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=

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.

Atas ialah kandungan terperinci Gunakan NextJs dan NestJs sebagai satu aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!