remix-starter-serverless - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #llm #golang #go #deep-learning #linux #docker #windows #kubernetes #vue #pytorch #openai #open-source

remix-starter-serverless

(★ 121)

A template for deploying Remix to AWS with the Serverless framework

파일 탐색기

최종 버전 다운로드 (.zip)

- - index.tsx
- entry.client.tsx
- entry.server.tsx
- root.tsx
- @web-std+blob+3.0.1.patch
- @web-std+file+3.0.0.patch
- @web-std+stream+1.0.0.patch
- favicon.ico
- index.ts
.gitignore
package.json
README.md
remix.config.js
remix.env.d.ts
serverless.yml
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/shamsup/remix-starter-serverless

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd remix-starter-serverless

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. 공식 설치 스크립트

쉬움 추천

사전 준비물

Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다.

npm i -g serverless

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 설치 후 새 터미널을 열고, 프로그램의 버전 확인 명령(예: --version)으로 정상 설치됐는지 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i -g serverless

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

npm run dev

개발/실행 서버를 켭니다.

npm run build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

npm run deploy

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm run deploy -- --stage production

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Welcome to Remix!

- [Remix Docs](https://remix.run/docs)
- [Serverless Docs](https://www.serverless.com/framework/docs)

This package is heavily inspired by Remix's Architect starter (`arc` deployment option in `npx create-remix`).

## Serverless Setup

When deploying to AWS Lambda with the Serverless framework, you'll need:

- Serverless CLI (`sls` or `serverless`)
- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html)

Serverless recommends installing the serverless cli globally:

```sh
npm i -g serverless
```

## Development

During development, we will use the standard `remix dev` command.

```sh
npm run dev
```

If you want to use `serverless-offline` with some aspects of your project, you'll need to run that as a separate script, or use something like [concurrently](https://npm.im/concurrently) to run both processes in one command.

Open up [http://localhost:3000](http://localhost:3000) and you should be ready to go!

## Deploying

Before you can deploy, you'll need to [install the AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html).

If you want to use the Serverless Dashboard, you'll need to [configure the Serverless CLI](https://www.serverless.com/framework/docs/getting-started/) and add the `app` key to your `serverless.yml` file.

If you make it through all of that, you're ready to deploy!

1. build the app for production:

```sh
   npm run build
   ```

2. Deploy with `sls`

```sh
   sls deploy
   ```

You're in business!

There's a `deploy` script in `package.json` already that will handle both parts if that's your thing.

```sh
# stage defaults to "dev"
npm run deploy
# or
npm run deploy -- --stage production
# or
yarn deploy --stage production
```

The first deployment will take a little while longer because it has to set up the CloudFront distribution, so expect it to take about 5 minutes.

After deploying, if you want to visit your CloudFront endpoint, you can run `sls info --verbose` to get the `WebsiteDomain` output from the Cloudformation stack.

## The Result

After deploying, you'll have an S3 bucket for storing static assets, your Remix app running in AWS Lambda behind API Gateway, and CloudFront as a CDN in front of both services.

## Limitations and First-deployment configuration

There is a limitation when using CloudFront with API Gateway that CloudFront cannot forward the `Host` header. This means that there isn't a default way to know which
domain a user is requesting from by default. This makes `request.url` in Remix show the API Gateway domain instead of the CloudFront domain, which will be noticeable
when using redirects from actions and loaders or building URLs from the request URL. In order to address this,you need to add the `X-Forwarded-Host` to the origin cache
policy for API Gateway. The `@remix-run/architect` adapter will read this header when transforming the API Gateway request for the Remix request handler.

### Overview

1. Deploy the stack
2. run `sls info --verbose` to get the `WebsiteDomain` from "Stack  Outputs"
2. Copy the WebsiteDomain into `serverless.yml` under `custom > dev > HOST` and uncomment the `OriginCustomHeaders` block for the `RemixOrigin`.
3. Deploy again

### Deploy the stack for the first time

Follow the [deployment](#Deploying) steps.

### Get the `WebsiteDomain`
_If you [use a custom domain](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html) for your CloudFront distribution, you can skip to the next section._

After the deployment completes, run the following in your terminal at the project root:

```sh
sls info --verbose
```

You'll get an output similar to the following:

```
Serverless: Running "serverless" installed locally (in service node_modules)
Service Information
service: remix-serverless-app
stage: dev
region: us-east-1
stack: remix-serverless-app-dev
resources: 16
api keys:
  None
endpoints:
  ANY - https://xxxxxxxxxxxxx.execute-api.us-east-1.amazonaws.com/{proxy+}
functions:
  remix: remix-serverless-app-dev-remix
layers:
  None

Stack Outputs
WebsiteDomain: xxxxxxxxxxxx.cloudfront.net
WebsiteBucketName: remix-serverless-app-dev-websitebucket-somerandomid
DistributionID: XXXXXXXXXXXX
HttpApiId: xxxxxxxxxxxxx
RemixLambdaFunctionQualifiedArn: arn:aws:lambda:us-east-1:xxx:function:remix-serverless-app-dev-remix:1
ServerlessDeploymentBucketName: remix-serverless-app-dev-serverlessdeploymentbuck-xxxxxxxx
HttpApiUrl: https://xxxxxxxxxxxxx.execute-api.us-east-1.amazonaws.com
```

From this output, copy the `WebsiteDomain` value from the "Stack Outputs" section.

### Add the X-Forwarded-Host header

In [serverless.yml](serverless.yml#L15), add paste the copied WebsiteDomain value.

```yml
custom:
  dev:
    HOST: xxxxxxxxxxxx.cloudfront.net # Replace this value
```

Then, uncomment the [`OriginCustomHeaders` block](serverless.yml#L148):

```yml
  OriginCustomHeaders:
    - HeaderName: X-Forwarded-Host
      HeaderValue: ${self:${self:provider.stage}.HOST}
```

### Deploy again!

```sh
  sls deploy
  # or npm run deploy
```

After deploying, your Remix app will use the domain from the X-Forwarded-Host header as the domain.

You'll want to add a domain for the `prod` or any other deployment stages you intend to use as well. If you [configure CloudFront to use a custom domain](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html), you will need to use your custom domain as the value instead of the CloudFront default.