Постепенно переносите приложения с микросервисами
В этой статье вы узнаете, как перейти с приложения Nuxt на Next.js с помощью сервисов Google App Engine. Вот итоговая база кода на GitHub.
Зависимости
Вот зависимости, которые вам понадобятся:
- следующий@13.1.1
- нуст@3.0.0
Обзор
Предположим, у нас есть монорепозиторий и мы структурируем приложение Nuxt и приложение Next.js в репозитории.
./nuxt_to_next ├── package.json ├── packages │ ├── next │ └── nuxt └── yarn.lock
Проект Nuxt является основным приложением, и мы будем постепенно переходить на проект Next.js постранично. Приложение Nuxt имеет четыре страницы: «Главная», «О нас», «Работы» и «Блог».
В этой статье мы перенесем страницу «О нас» с Nuxt на Next.js.
Вот обзор реализации:
- Разверните приложение Nuxt3
- Создайте страницу «О нас» на Next.js
- Разверните приложение Next.js
- Переопределить правила маршрутизации
Развернуть приложение Nuxt
Сначала мы развернем приложение Nuxt в Google App Engine.
Давайте создадим packages/nuxt/app.yamlв проекте Nuxt. Вот код:
env: standard
runtime: nodejs16
instance_class: F1
automatic_scaling:
max_instances: 1
max_idle_instances: 1
min_instances: 0
min_idle_instances: 0
handlers:
- url: /.*
script: auto
secure: always
env_variables:
NUXT_HOST: "0.0.0.0"
NUXT_PORT: "8080"
NODE_ENV: "production"
Во время развертывания Node.js в Google App Engine среда выполнения устанавливает зависимости с помощью npm install или yarn install, а затем запускает сервер с помощью npm start или yarn start. Чтобы заставить его работать на Nuxt3, нам нужно обновить некоторые скрипты в package.json следующим образом:
{
"private": true,
"name": "package-nuxt",
"version": "1.0.0",
"scripts": {
- "build": "nuxt build",
+ "build": "yarn nuxt:prepare && nuxt build",
- "dev": "nuxt dev",
+ "dev": "yarn nuxt:prepare && PORT=3001 nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
+ "start": "HOST=0.0.0.0 PORT=8080 node .output/server/index.mjs",
- "postintall": "nuxi prepare",
+ "nuxt:prepare": "nuxi prepare",
},
}
Поскольку Google App Engine устанавливает зависимости с помощью NODE_ENV=production, мы не хотим, чтобы postintall выполнялось во время установки, поскольку nuxi не будет включено в зависимости. Чтобы запустить сервер, запустите output/server/index.mjs, который генерируется запуском yarn build.
Давайте построим его с помощью следующей команды:
NODE_ENV=production yarn build
Затем разверните его с помощью этой команды:
gcloud app deploy
Создайте страницу «О нас» на Next.js
Далее мы создадим страницу About в проекте Next.js. Мы будем создавать каждую ссылку, используя тег a вместо NextLink, потому что в проекте Next.js пока нет других страниц, нам нужно перейти по ним в проект Nuxt.
Давайте создадим файл packages/next/pages/about.tsx. Вот как это выглядит:
import React from 'react'
export default function About() {
const title = 'About'
return (
<div>
<div className="text-sm font-medium text-center text-gray-500 border-b border-gray-200">
<ul className="flex flex-wrap -mb-px">
<li className="mr-2">
<a href="/" className="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">Home</a>
</li>
<li className="mr-2">
<a href="about" className="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">About</a>
</li>
<li className="mr-2">
<a href="/works" className="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">Works</a>
</li>
<li className="mr-2">
<a href="/blog" className="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">Blog</a>
</li>
</ul>
</div>
<div className="p-4">
<h1>Hello, {title} from Next.js</h1>
</div>
</div>
)
}
Эта страница выглядит так:
Разверните приложение Next.js
Далее давайте развернем проект Next.js.
Создайте packages/next/app.yaml и добавьте этот код:
env: standard
runtime: nodejs16
instance_class: F1
automatic_scaling:
max_instances: 1
max_idle_instances: 1
min_instances: 0
min_idle_instances: 0
handlers:
- url: /_next/static
static_dir: .next/static
- url: /(.*\.(gif|png|jpg|ico|txt|svg))$
static_files: public/\1
upload: public/.*\.(gif|png|jpg|ico|txt|svg)$
- url: /.*
script: auto
secure: always
env_variables:
HOST: "0.0.0.0"
PORT: "8080"
NODE_ENV: "production"
Затем добавьте свойство service следующим образом:
env: standard
runtime: nodejs16
instance_class: F1
+ service: next
automatic_scaling:
max_instances: 1
max_idle_instances: 1
min_instances: 0
min_idle_instances: 0
handlers:
- url: /_next/static
static_dir: .next/static
- url: /(.*\.(gif|png|jpg|ico|txt|svg))$
static_files: public/\1
upload: public/.*\.(gif|png|jpg|ico|txt|svg)$
- url: /.*
script: auto
secure: always
env_variables:
HOST: "0.0.0.0"
PORT: "8080"
NODE_ENV: "production"
Это создаст службу в том же приложении и экземпляр, отделенный от проекта Nuxt.
Используя службы, вы можете развернуть несколько служб, которые ведут себя как микрослужбы. Каждый механизм приложения должен включать по крайней мере одну службу. Если вы пропустите поле услуги в app.yaml, то услуга default будет применена автоматически. В этом случае проект Nuxt — это сервис default, а проект Next.js — сервис next.
Перейдите к следующему пакету и разверните его с помощью этого кода:
cd packages/next gcloud app deploy
Переопределить правила маршрутизации
Теперь, когда проект Next.js может обрабатывать страницу «О программе», мы добавим новое правило маршрутизации для перехода к Next.js из Nuxt.
Перейдите к проекту Nuxt и добавьте packages/nuxt/dispatch.yaml следующим образом:
dispatch:
- url: "*/about"
service: next
- url: "*/_next/*"
service: next
dispatch.yaml позволяет вам переопределять правила маршрутизации для отправки входящих запросов в конкретную службу на основе пути или имени хоста в URL-адресе. В этом случае все запросы к странице about будут перенаправлены на проект Next.js без изменения URL. Приложение Next.js должно обслуживать статические файлы в папке /_next.
Давайте развернем файл отправки с помощью этой команды:
gcloud app deploy dispatch.yaml
Когда все будет готово, мы изменим ссылку на страницу about в проекте Nuxt.
Откройте packages/nuxt/layouts/default.vue и измените ссылку следующим образом:
<template>
<div>
<div class="text-sm font-medium text-center text-gray-500 border-b border-gray-200">
<ul class="flex flex-wrap -mb-px">
<li class="mr-2">
<NuxtLink to="/" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">Home</NuxtLink>
</li>
<li class="mr-2">
- <NuxtLink to="/about" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">About</NuxtLink>
+ <a href="/about" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">About</a>
</li>
<li class="mr-2">
<NuxtLink to="/works" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">Works</NuxtLink>
</li>
<li class="mr-2">
<NuxtLink to="/blog" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300">Blog</NuxtLink>
</li>
</ul>
</div>
<div class="p-4">
<slot />
</div>
</div>
</template>
Создайте его и разверните.
NODE_ENV=production yarn build gcloud app deploy
После развертывания он должен работать так:
Страница About обслуживается через проект Next.js без изменения URL-адреса, в то время как другие страницы запускаются в проекте Nuxt.
Краткое содержание
Использование служб в Google App Engine позволяет вам совместно использовать функции движка приложения и взаимодействовать с другим через файл отправки. Поскольку службы ведут себя как микрослужбы, вы можете развернуть несколько служб независимо и запускать их как набор микрослужб.
В этой статье мы реализовали Next.js от Nuxt, который можно применить к любому фреймворку, такому как Remix и Astro. Если вы используете Kubernetes в своих микросервисах, вы можете достичь той же архитектуры, используя сервисную сетку, такую как Istio.
Спасибо за прочтение. Оставайтесь с нами, чтобы узнать больше.
