Рубрики
Без рубрики

Приложение Nuxt SSR в AWS с использованием Serverless Bless

Я изо всех сил пытался получить свой сайт портфеля в Интернете, потому что я не нашел никакого подходящего D … Теги с сервером, Vue, JavaScript, Node.

Я изо всех сил пытался получить свой сайт портфеля в Интернете, потому что я не нашел никакой подходящей документации в Интернете для этого процесса. В Интернете много случайных статей, в которых говорится, что именно так вы можете размещать Nuxt SSR на AWS, но многие из них либо в конечном итоге упоминают, что использует опцию Nuxt Generate (не SSR), либо может быть немного сложным для фактической настройки. Я никогда не делал пост о чем -либо, кроме как хотел, чтобы помочь кому -то еще, что борется с той же проблемой.

Самое замечательное в использовании Server Bless для развертывания Nuxt Sate – это то, что если у вас есть другие сервисы AWS, вы хотите интегрировать, это так же просто, как добавить некоторые Ямролостые сечения Анкет Затем вы можете получить доступ к данным из этих служб через промежуточное программное обеспечение ExpressJS и получить их из res nuxt контекст .

Предварительные условия:

Шаг 1: Создать Demo Nuxt App

Чтобы создать демонстрационный проект бежать

$ npm init nuxt-app nuxt-serverless

в вашем терминале. Для приглашения режима рендеринга выберите Universal (SSR/SSG) . Для цели развертывания выберите Сервер (node.js хостинг) . Для всех других подсказок выберите, какие варианты вы хотите для своего проекта. Рядом, чтобы установить необходимые зависимости CD в папку проекта и запустить

$ npm i aws-serverless-express express serverless-http

Чтобы установить необходимые DevDependences бежать

$ npm i -D serverless serverless-offline

После того, как проект создан, открыть его в вашем предпочтительном текстовом редакторе. Вам нужно будет создать app.js Файл, чтобы программно обслуживать Nuxt Info с помощью ExpressJS. Скопируйте и вставьте в этот код:

// app.js
'use strict'

const { createServer, proxy } = require('aws-serverless-express')
const express = require('express')
const { Nuxt } = require('nuxt')
const config = require('./nuxt.config.js')

const app = express()
const nuxt = new Nuxt({
  ...config,
  dev: false,
  _start: true
})

app.use(async (req, res) => {
  if (nuxt.ready) {
    await nuxt.ready()
  }
  nuxt.render(req, res)
})

const server = createServer(app, void 0, [
  'application/javascript',
  'application/json',
  'application/manifest+json',
  'application/octet-stream',
  'application/xml',
  'font/eot',
  'font/opentype',
  'font/otf',
  'image/gif',
  'image/jpeg',
  'image/png',
  'image/svg+xml',
  'image/x-icon', // for favicon
  'text/comma-separated-values',
  'text/css',
  'text/html',
  'text/javascript',
  'text/plain',
  'text/text',
  'text/xml',
  'application/rss+xml',
  'application/atom+xml'
])

module.exports.handler = (event, ctx) => {
  proxy(server, event, ctx)
}

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

# serverless.yml
service: nuxt-serverless

provider:
  name: aws
  runtime: nodejs12.x
  stage: ${opt:stage, 'dev'}
  region: us-west-2
  apiGateway:
    binaryMediaTypes:
      - '*/*'
  environment:
    # stops telemetry output from nuxt
    NUXT_TELEMETRY_DISABLED: 1

functions:
  nuxt:
    timeout: 30
    handler: app.handler
    events:
      - http: ANY /
      - http: ANY /{proxy+}

package:
  include:
    # ensures that the build output gets packaged
    - .nuxt/**

plugins:
  - serverless-offline

Шаг 2: Тестовая работа без сервера.

Чтобы убедиться, что нет проблем после развертывания, вы захотите запустить:

$ npm run build && sls offline --stage dev --noTimeout --noPrependStageInUrl

Пока он работает, перейти к http://localhost: 3000/ И вы увидите, что ваше приложение Nuxt работает без сервера! Если есть какие -либо проблемы, вы должны попытаться Google выходы ошибок и попытаться определить, что происходит перед развертыванием. Вы всегда можете обратиться ко мне, и я могу попытаться изо всех сил.

Шаг 3: развернуть эту присоску

Иди и беги

$ sls deploy --stage dev

Какой бы URL -адрес он выплюнул, не будет работать из -за добавления без серверного пути, но вы можете перейти на URL, чтобы увидеть нагрузку на содержание, это будет выглядеть довольно странно. Для его работы требуется настраиваемое доменное имя.

Шаг 4: Картирование домена

Войдите в свой Консоль AWS Анкет Если у вас еще нет доменного имени (маршрут 53) и SSL Certs (диспетчер сертификатов), вы захотите просмотреть документы AWS и зарегистрировать/создать оба из них. Если у вас уже есть оба, то в типе строки поиска API Gateway и выберите это. В левой навигационной панели щелкните Пользовательские доменные имена и нажмите Создать Анкет Введите в домен, который вы зарегистрировали по маршруту 53. Для типа конечной точки выберите Оптимизированное (поддерживает только API REST). . Для сертификата ACM выберите сертификат, который был создан в диспетчере сертификатов для работы с вашим доменным именем. Нажмите Создать доменное имя а затем выберите Отображения API . Нажмите на Настройка сопоставления API и нажмите на Добавить новое отображение Анкет Установите созданный вами API, и сцену, которую он был развернут на (DEV в этой настройке) и нажмите Сохранить Анкет

Шаг 5: Магия

Теперь перейдите к своему доменному имени и посмотрите магию 🎉

Оригинал: “https://dev.to/jacobanavisca/host-nuxt-ssr-app-on-aws-using-serverless-2ha8”

Читайте ещё по теме: