Forem: Rafael Franco

Remix com serverless

Rafael Franco — Sat, 12 Nov 2022 14:26:12 +0000

Nessa postagem vamos aprender como fazer o deploy de uma aplicação Remix no serverless. Caso só queria ver o código, acesse esse link.

Ao criar uma nova aplicação Remix temos a possibilidade de escolher onde iremos subir nossa aplicação como Remix App Server, Express Server, Architect (AWS Lambda), Fly.io, Netlify, Vercel e Cloudflare Pages. Alguns desses não dão tanta margem pra escolha como Netlify e Vercel e outros requerem uma infraestrutura um pouco mais robusta para rodar como o Express Server. Pessoalmente eu prefiro ter controle total da minha aplicação ao invés de depender do dashboard do Vercel ou Netlify e das restrições que essas plataformas impõe, e mesmo que o Architect seja extremamente parecido com o que vamos aprender aqui, ele também tem suas próprias restrições e uma documentação não tão boa para iniciantes.

Por isso, ao conhecer o framework Remix eu fiquei curioso para saber se funcionaria em um ambiente serverless como o AWS Lambda, tendo total controle no deploy e sobre como a aplicação funciona. Procurando soluções já prontas me deparei com o repositório shamsup/remix-starter-serverless, que possui um README muito bem detalhado do processo e é basicamente isso que vamos resumir nessa postagem.

Para iniciar, podemos criar uma nova aplicação Remix usando o template do Architect (AWS Lambda), que possui uma configuração similar ao que vamos usar aqui.

npx create-remix@latest 
? Where would you like to create your app? remix-serverless
? What type of app do you want to create? Just the basics
? Where do you want to deploy? Architect (AWS Lambda)
? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? Yes
💿 That's it! `cd` into "/Users/rafael/Developer/remix-serverless" and check the README for development and deploy instructions!

Logo de cara podemos apagar alguns arquivos que não vamos utilizar como server.js, app.arc e server/config.arc. Também podemos apagar os scripts dev:arc e start do nosso package.json.

"scripts": {
  "build": "remix build",
  "dev:remix": "remix watch",
  "dev:arc": "cross-env NODE_ENV=development arc sandbox",
  "dev": "remix build && run-p \"dev:*\"",
  "start": "cross-env NODE_ENV=production arc sandbox"
}

Agora vamos instalar as dependências do serverless pra nossa configuração.

npm install serverless esbuild serverless-esbuild serverless-s3-sync -D

No arquivo remix.config.js, vamos apagar o campo server e adicionar um novo chamado serverBuildDirectory.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  serverBuildTarget: 'arc',
  ignoredRouteFiles: ['**/.*'],
  server: 'server.js',
  serverBuildDirectory: 'server/build',
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "server/index.js",
  // publicPath: "/_static/build/",
}

Com as dependências instaladas e o arquivo de configuração atualizado, podemos criar dois novos arquivo chamados serverless.yml onde ficará a configuração da nossa aplicação e server/remix.ts onde ficará o nosso Lambda handler do Remix.

import { createRequestHandler } from '@remix-run/architect'
import type { ServerBuild } from '@remix-run/node'

const build = require('./build') as ServerBuild

export const handler = createRequestHandler({
  build,
  getLoadContext() {
    return {}
  },
})

Esse arquivo será o handler da nossa Lambda e receberá todas as requisições do cliente.

Agora vamos ver o arquivo de configuração do serverless.

service: remix-serverless

frameworkVersion: '3'

plugins:
  - serverless-esbuild
  - serverless-s3-sync

provider:
  name: aws
  runtime: nodejs16.x
  stage: ${opt:stage, 'dev'}
  region: ${opt:region, 'us-east-1'}

custom:
  esbuild:
    bundle: true
    minify: false
    sourcemap: true
    sourcesContent: false
    exclude: ['aws-sdk']
    target: 'node16'
    platform: 'node'

  s3Sync:
    buckets:
      - bucketNameKey: WebsiteBucketName
        bucketPrefix: website/
        localDir: public

functions:
  remix:
    handler: server/remix.handler
    events:
      - httpApi:
          method: any
          path: '/{proxy+}'

resources:
  Resources:
    HttpApi:
      Type: AWS::ApiGatewayV2::Api
      Properties:
        Name: HttpApi-${self:service}
        ProtocolType: HTTP

    WebsiteBucket:
      Type: AWS::S3::Bucket
      Properties: {}

    WebsiteOriginAccessIdentity:
      Type: AWS::CloudFront::CloudFrontOriginAccessIdentity
      Properties:
        CloudFrontOriginAccessIdentityConfig:
          Comment: Origin Access Identity to Access ${self:service} Website Bucket

    WebsiteBucketPolicy:
      Type: AWS::S3::BucketPolicy
      Properties:
        Bucket: !Ref WebsiteBucket
        PolicyDocument:
          Statement:
            - Effect: Allow
              Action:
                - s3:GetObject
              Resource:
                Fn::Join:
                  - /
                  - - Fn::GetAtt:
                        - WebsiteBucket
                        - Arn
                    - '*'
              Principal:
                CanonicalUser:
                  Fn::GetAtt:
                    - WebsiteOriginAccessIdentity
                    - S3CanonicalUserId

    CDN:
      Type: AWS::CloudFront::Distribution
      DependsOn:
        - WebsiteBucket
        - HttpApi
      Properties:
        DistributionConfig:
          Enabled: true
          Origins:
            - DomainName:
                Fn::GetAtt:
                  - WebsiteBucket
                  - RegionalDomainName
              Id: StaticOrigin
              S3OriginConfig:
                OriginAccessIdentity:
                  Fn::Join:
                    - /
                    - - origin-access-identity
                      - cloudfront
                      - !Ref WebsiteOriginAccessIdentity
              OriginPath: '/website'
            - DomainName:
                Fn::Join:
                  - ''
                  - - Ref: HttpApi
                    - '.execute-api.${self:provider.region}.amazonaws.com'
              Id: RemixOrigin
              CustomOriginConfig:
                OriginProtocolPolicy: https-only
                OriginSSLProtocols: [TLSv1.2]
          DefaultCacheBehavior:
            AllowedMethods: [GET, HEAD, OPTIONS, PUT, PATCH, POST, DELETE]
            CachedMethods: [GET, HEAD, OPTIONS]
            Compress: true
            TargetOriginId: RemixOrigin
            ViewerProtocolPolicy: redirect-to-https
            ForwardedValues:
              QueryString: true
              Cookies:
                Forward: none

  Outputs:
    WebsiteBucketName:
      Value:
        Ref: WebsiteBucket
    DistributionID:
      Value:
        Ref: CDN
    WebsiteDomain:
      Value:
        Fn::GetAtt: [CDN, DomainName]

Esse é o arquivo de configuração padrão do serverless. Com isso, você terá o mínimo necessário para conseguir subir sua aplicação na AWS.

Alguns pontos interessantes dessa configuração é que além de um Lambda que recebe as requisições, também estamos usando o CloudFront como CDN e o S3 para armazenar nossos arquivos estáticos. Sobre esse último, usamos o plugin serverless-s3-sync para subir esses arquivos diretamente no bucket em todo deploy.

Next.js com serverless-stack

Rafael Franco — Sat, 12 Nov 2022 14:22:06 +0000

Existem algumas formas de fazer deploy de uma aplicação React ou Next.js no ambiente da AWS sem custos. Por exemplo, é possível subir uma aplicação React pura usando apenas CloudFront e o S3, porém como o Next.js existe a opção de usarmos como SSR vamos usar o serverless-stack. Há outras formas de fazer isso como o Vercel (criadores do Next.js), Amplify e Serverless Next.js (sls-next) Component, mas na minha opinião a abstração que o serverless-stack (ou SST) é a melhor dentre as opções.

Você pode conferir o código final aqui.

O que você vai precisar

Uma conta na AWS;
AWS CLI instalado;

Criando uma aplicação SST

O serverless-stack possuí uma CLI que facilita a criação de uma aplicação inicial, similar com o create-react-app (CRA) do React e create-next-app do Next.js.

npx create-serverless-stack nextjs-app
cd nextjs-app

Dentro do diretório nextjs-app você vai ver um arquivo chamado sst.json com o conteúdo:

{
  "name": "nextjs-app",
  "region": "us-east-1",
  "main": "stacks/index.js"
}

A propriedade name é o nome da aplicação, region é a região que sua aplicação será hospedada e main é o arquivo principal da sua aplicação SST. Por padrão a região selecionada sempre será us-east-1, mas é possível trocar por sa-east-1 por exemplo, que são os servidores da AWS em São Paulo.

No mesmo diretório também haverá uma pasta chamada stacks, que é onde fica o código que servirá para gerar a infraestrutura da aplicação.

Para este exemplo, vamos apagar a pasta src que o SST criou por padrão porque vamos colocar nossa aplicação Next.js em uma pasta com esse mesmo nome.

rm -rf src

Criando uma aplicação Next.js

Para criar a aplicação vamos usar o create-next-app, que vai gerar uma aplicação do Next.js padrão. Nossa aplicação ficará no diretório src.

npx create-next-app src

Para esse exemplo não vamos fazer nenhuma alteração no diretório do Next.js.

Configurando Next.js no SST

Agora vamos configurar nossa aplicação Next.js no arquivo stacks/MyStack.js. Inicialmente esse arquivo vai conter um exemplo de uma configuração de um lambda. Podemos remover essa configuração e colocar a seguinte configuração:

import * as sst from '@serverless-stack/resources'

export default class MyStack extends sst.Stack {
  constructor(scope, id, props) {
    super(scope, id, props)

    // Configuração do Next.js aqui
    const site = new sst.NextjsSite(this, 'Site', {
      path: 'src',
    })

    this.addOutputs({
      URL: site.url,
    })
  }
}

Em path será onde sua aplicação do Next.js está.

Subindo a aplicação

Nesse ponto já podemos subir nossa aplicação com o seguinte comando:

npm run deploy -- --stage prod

Esse comando vai subir a infra da nossa aplicação e mostrar a URL da nossa aplicação. Essa URL será do CloudFront, mas é possível configurar um domínio customizado diretamente no SST, mas isso é conteúdo para outra postagem.