클라이언트 애플리케이션 배포 방법 - team-wedev/wedev GitHub Wiki

클라이언트 애플리케이션 배포 방법

클라이언트 애플리케이션 배포 방법에 대한 안내입니다. 본 애플리케이션은 serverless framework의 또 다른 버전인 serverless components를 활용한 serverless-next.js를 사용하여 배포하도록 설정되었습니다.

배포 환경

배포 환경은 크게 세 가지로 구분되어 있습니다.

  1. production - 실제 사용자가 애플리케이션에 접근하는 환경입니다.
  2. staging - production 환경에서 사용할 코드 베이스를 production에 배포되기 전에 배포 환경에서 테스트 하기 위한 환경입니다.
  3. dev - 각 개발자가 새로운 feature 또는 에러를 수정할 때, 배포환경에서 테스트하기 위한 환경입니다.

환경 변수 설정하기

각 배포 환경에 사용할 환경변수를 별도로 사용합니다. 따라서 총 세 개의 .env파일을 작성해야 합니다. /env 디렉토리에 dev.env, stage.env, prod.env를 작성합니다. 그리고 다음과 같은 템플릿 내용으로 각각의 파일을 작성합니다.

API_SERVER_URL= 

GITHUB_REQUEST_USER_IDENTITY_URL=https://github.com/login/oauth/authorize
GITHUB_CLIENT_ID=

JWT_SECRET=
JWT_SESSION_TOKEN_KEY=

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=

ALIAS=
BUCKET=

여기서 AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY에 aws 계정 키 id와 secret을 각각 작성합니다. 그 다음, ALIAS와 BUCKET에는 환경에 알맞는 값을 작성합니다.

// production.env
ALIAS=prod
BUCKET=wedev-client-prod
// stage.env
ALIAS=stage
BUCKET=wedev-client-stage
// dev.env
ALIAS=<github ID>
BUCKET=wedev-client-<githubID>

// 예
ALIAS=riverandeye
BUCKET=wedev-client-riverandeye

배포 방법

다음의 명령어를 통해 배포할 수 있습니다.

// production 환경
npm run deploy:prod

// staging 환경
npm run deploy:stage

// dev 환경
npm run deploy:dev

배포 관련 코드

serverless.yml

serverless components의 룰에 따른 serverless.yml 파일을 다음과 같이 작성합니다. 본 파일은 배포 설정에 대한 내용들을 담고 있습니다.

wedev-client:
  component: serverless-next.js
  inputs:
    bucketName: ${env.BUCKET}

serverless.js

const { Component } = require('@serverless/core');

class Deploy extends Component {
  async default(inputs = {}) {
    const { stage } = inputs;
    require('dotenv').config({ path: `${__dirname}/env/${stage}.env` });

    const alias = process.env.ALIAS || stage;

    if (!stage) {
      this.context.log(
        'No environment defined... Choices are staging and prod',
      );
      return;
    }

    this.context.log(`Deploying to ${process.env.BUCKET}. Please wait.`);
    const template = await this.load('@serverless/template', alias);
    const output = await template({ template: 'serverless.yml' });

    return output;
  }
}

module.exports = Deploy;

.serverless/

배포할 때마다 자동 생성되는 파일들을 담는 디렉토리 입니다. 배포가 완료되면, 실제로 aws의 어떤 리소스에 배포가 되었는지 기록됩니다. stage가 처음 배포되면 파일이 생성되고, 같은 stage에 다시 배포하게 되면 파일의 내용이 수정될 수 있습니다. 본 디렉토리의 내용은 커밋하여 레포지터리에서 관리합니다.

⚠️ **GitHub.com Fallback** ⚠️