한 번 배포를 해보자

갑자기 말투가 바뀌는 이상한 구간이 있습니다,,,

 

1. (VSCode) build와 export하기

 

package.json

"scripts": {
    "dev": "next dev",
    "build:ssg": "next build & next export", // 이거 추가
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },

 

next.config.js

const nextConfig = {
  reactStrictMode: true,
  trailingSlash: true, // 이거 추가
};

module.exports = {
  typescript: {
    ignoreBuildErrors: true, // 이거 추가
  },
};

위에는 boards.html 파일이 아니라 boards폴더 안에 index.html파일이 들어간 형식으로 만들기 위해 하는 것

밑에는 타입스크립트 에러를 무시하기 위해 넣은 것(필수 아님!)

 

 

터미널

yarn build:ssg

하면 out 폴더가 생긴다!

정적 배포를 위한 html들이 담겨있다. 

 

out안에 있는 걸 긁어다가 스토리지에 올리고 그 주소를 치면 해당 페이지를 다운로드 받아서 보여주는 것이다!

→ 무한 트래픽o, 24시간 yarn dev할 필요x 

 

여기까진 ssg, 즉 정적배포를 하는 방법. 

정적으로 파일을 미리 만들어두는 방법이기 때문에 동적으로 변할 수 없다.

 

[boardId] 동적 라우팅이라서 미리 html 파일을 만들어 놓을 수 없다. 

 

 

이건 CloudFront에서 분기 처리를 한다.

 

 

 

.eslintrc.json

{
  "extends": ["next/babel", "next/core-web-vitals"]
}

 

 

2. (AWS) S3 데이터 올리기

 

이제 AWS에 들어간다. 

https://aws.amazon.com/ko/

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

그 후 s3 메뉴에 들어간다.

 

S3 → 버킷 만들기 → ACL 활성화됨, 버킷 소유자 선호 → !!모든 퍼블릭 액세스 차단!! 지금은 모두가 보기 위한 데이터, 그래서 체크 해제

 

버킷이름은 도메인이름과 동일하게 하는 게 좋다.

AWS 리전 : 아시아 태평양(서울)

 

업로드 누른다. 

 

out 폴더 안에 있는 걸 쫙 긁어서 업로드하고 권한에서 퍼블릭 읽기 액세스 권한 부여한다. 업로드 한 뒤,

 

속성→ 정적 웹사이트 호스팅 작성(하나로 묶어서 이런 주소로 만들어주겠다~)

이제 모두들 볼 수 있다..! 

 

그러나 내가 산 도메인 주소랑 아직 연결이 안되어있기 때문에 이것을 연결하러갈겁니다~~!!!

 

3. (AWS) Route53 DNS작업. 도메인 연결하기 

Route53 메뉴에 들어간다.

 

route 53 → 호스팅 영역 생성

NS, SOA 레코드라고 부른다.

 

호스팅 영역 생성에서 도메인을 입력 - 퍼블릭 호스팅 영역 ->생성

 

레코드 생성 - 단순 라우팅

 

사진상 주소는 제 도메인에서 살짝 바꾼 것입니다... 진짜X

서브 도메인을 입력해도 아래로 연결시켜주겠다는 것~ www.uncommonthings.com  -> uncommonthings.com

 

레코드 유형 : CNAME - 레코드 유형에 따른 IP 주소 또는 다른 값 -> 단순 레코드 정의

 

하지만 도메인을 구입한 곳은 가비아야! 그럼 지금은 가비아에서 설정하는 게 작동하는 것.

AWS랑 연결시켜줘야겠죠?

 

가비아(도메인 구입한 곳) - 통합관리툴 - 도메인 - 네임서버 설정 변경해줄겁니다. 

(어디든 네임서버 설정으로 들어가면 된다.)

 

(AWS)

NS(네임서버) 옆에 있는 주소들을 가비아의 네임서버 설정하는 곳에 복사 붙여넣기 합니다!

이때 맨 마지막 .은 빼고 입력합니다. 

 

(사실 이건 위험한 작업입니다,,, 레코드가 많다면 변경하는 순간 완전 뒤엉키거든요...!)

 

연결이 된다면?! 

부산에서도..서울에서도 볼 수 있다구~~

따란,,, 이제 친구들에게 가족들에게 자랑합시다...^ㅁ^! 정적배포 끝~~~!!!

 

 

4. (AWS) https - 인증서 발급받기

(...DNS는 문자를 숫자로 바꿔주는 역할을 하는 거고, 실제 접속되는 위치는 cloudFront

 

AWS - Certificate Manager

인증서. 원래 구매해야하는데 자체적으로 제공해줍니다. 

SSL → 업그레이드 된게 TLS

일반적으로 SSL이라고 이야기 합니다. 

 

CNAME 밸류를 이걸로 설정해봐. 그럼 믿어줄게. 하는 식으로 인증을 합니다~...)

 

 

AWS Certificate Manager 메뉴에 들어갑니다.

 

 

완전히 정규화된 도메인 이름 - 내 도메인과 완전 똑같이 적어주면 됩니다.

 

그 후 요청!

 

발급받은 인증서에 들어갑니다. 

DNS에 CNAME 레코드를 등록해야 검증이 완료 됩니다. 

CNAME 이름과 값이 보이는데 이 두 개를 복사합니다. 

 

route53메뉴  DNS 수정하러! 

레코드 생성 - 단순 라우팅 - 단순 레코드 정의

 

이름엔 아까 복사해놓은 CNAME 이름을(노란색), (이 때 이름 뒤의 .은 빼주세요!)

값에는 CNAME 값을(연두색) 입력합니다.

 

발급됨으로 나오면 정상적으로 끝난 것입니다.

 

하지만 버지니아 북부에 다시 만들어야 한다네요... 

저도 복습하면서 또 만들었으니까 성내지 마세요. .. 

 

(인증서 적용할 수 있는 곳이 여러군데 있는데 우린 클라우드 프론트에 적용하기 위해서 발급받은 겁니다. 

클라우드 프론트에 적용되는 인증서는 다른 지역은 안되고, 버지니아 북부의 인증서만 가능합니다. )

 

(왜냐면...) 

Content Delivery Network, CDN이라는 서비스!

해당 컨텐츠를 배달해주는 네트워크

서울에 있고 일본에 있고 이런 개념이 아닙니다. 컨텐츠를 얼마나 빨리 제공해줄 것인가에 초점이 맞춰져 있습니다.

 

 

페이스북은 미국건데, 우리가 접속하려면 네트워크가 미국까지 갔다와야겠죠?! 그럼 느려요.

CDN은 전세계적으로 흩어져있어요. 그리고 거기에 html, js를 넣어놓는 거예요. 한국에서 페이스북 접속하면 가까운 CDN에서 받아오는 거예요! 즉 클라우드 프론트는 여기저기 흩어져있는 거고, 글로벌인거고 특정 나라의 인증서를 지정할 수 없는겁니다!

디폴트 인증서를 적용해야하는데, 그게 버지니아 북부 인증서기 때문에 그걸 만들어야 한답니다!!!

4-2. (찐) 인증서 발급 받기

 

여기서 위에랑 똑같이 해주면 됩니다...^^*

 

앗, 근데 그냥 복사/붙여넣기를 하면! 

이렇게 뒤에 도메인이 반복되네요!

CNAME입력할 때 .과 함께 뒤에 중복되는 부분도 지워주도록 합시다~~

 

( _샬라샬라샬라.uncommonthings.xyz.인 것을 _샬라샬라샬라 로 바꿔서 입력합시다)

 

5. (AWS) CloudFront 에 인증서 적용하기

CloudFront 메뉴에 들어갑니다.

배포 생성 - 원본 도메인을 선택하는데,

 

목록 중에 선택하면 이렇게 진짜 도메인과 다른 이름이 적히기 때문에, 직접 적어주어야 합니다. 

 

S3 들어가서 속성 맨 밑에 내리면 정적 웹 사이트 호스팅 하는 부분에 주소가 있는데, 이걸 복사해서

붙여넣은 뒤 http://를 지워줍니다.

 

뷰어 프로토콜 정책에서는 Redirect HTTP to HTTPS 를 선택합니다.

HTTP로 들어와도 HTTPS로 연결해주겠다는 뜻입니다! 

 

쭉 내려서 설정부분에서... 

모든 엣지 로케이션에서 사용 (위에서 말한 여기저기 퍼뜨려져 있는 아이들이 엣지 로케이션입니다!)

대체 도메인 이름에서는 도메인 이름을 입력해줍니다.

 

그리고 그 밑에 사용자 정의 SSL 인증서

저는 복습하느라 하나 더 맹글어서 두 개 있네요... 아마 하나만 있을거고 선택하면 됩니다!

 

나머지는 기본값으로 하고 배포 생성하면 됩니다!

 

6. (AWS) CloudFront에서 분기되도록 하기

route53 메뉴에 접속합니다.

A 레코드 선택 - 편집 

(s3과 연결되어 있는 걸 CloudFront랑 연결시킬겁니다!!!) 

여기서 CloudFront 배포에 대한 별칭으로 바꾸고 밑에 input칸을 누르면 목록에 뜹니다! 그걸 누르면 됩니다~

이제 https 로 접속이 가능합니다^ㅅ^ 

7. (AWS) 배포할 컴퓨터를 빌려보자

EC2 메뉴에 들어갑니다!

 

EC2- 인스턴스 시작

이름은 보통 뒤에 vm(virtual machine)을 붙입니다!

 

가장 접속하기 쉬운 것 - Amazon Linux 

 

키 페어 - 없이 진행

 

SSH 시큐어 쉘(컴퓨터에 접근할 수 있게끔 권한 주는 것)

- 에서 트래픽 허용

위치 무관 - 누구든지 접속할 수 있다. (학원에서도, 집에서도…)

 

-> 인스턴스 시작

 

인스턴스 중지 - 컴퓨터 끔

종료는 컴퓨터를 없애는 것!!!! 착각해서 없애는 일이 없도록 합시다... 

 

이제 이 컴퓨터에 접속하면 됩니다! 

그럼 실제로 켜져있는 컴퓨터의 터미널이 나옵니다

 

이게 어떻게 가능한 것인지 저는 아직도 믿기지가 않네요...~~~!)

 

여기에 깃 클론하고 yarn dev시키면 됩니다. ^_^

 

curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash

sudo yum install -y nodejs

sudo npm install -g yarn

sudo yum install git

이 이후에 git --version 으로 깃 버전 확인해주고,

git clone 한 뒤 아이디, 토큰을 입력한 후 엔터 쳐주면 됩니다.

 

그리고 터미널에서 빌드하려는 폴더 cd를 통해 들어간 뒤  yarn install 합니다.

 

yarn build 

yarn start

build 후에 start를 하면 됩니다! 

하지만.. 이 localhost:3000은 내 컴퓨터의 localhost:3000이 아니겠죠..?! 

IP주소+:3000 하면 접속이 가능해야하지만, 방화벽이 막고 있어서 들어갈 수 없습니다. 

 

8. (AWS) 컴퓨터 방화벽 열기!

 

EC2 - 인스턴스 - 보안 - 보안그룹

아마 22번 포트(SSH 쉘)가 누구에게나 들어올 수 있게끔 되어있을겁니다. 여기에 3000을 등록할 것입니다. 

 

(인바운드는 그 EC2 기준으로 접속할 때 인바운드, 밖으로 나가는 걸 못하게 할 때가 아웃바운드

일반적으로 방화벽을 푼다 = 인바운드 푼다.

아웃바운드는 언제? 보안이 중요한 회사들… 회사 내부에서 작업한 것들 못 나가게)

 

보안 그룹이름을 클릭해서 들어갑니다. 

규칙 추가-포트 범위 3000-저장합니다!

 

인스턴스 - 퍼블릭 IPv4 주소를 복사하고 브라우저에 붙여넣기 한 뒤 :3000 붙이면 가상 컴퓨터의 localhost:3000에 접속한 것을 확인할 수 있습니다!

 

 

컨트롤 C 해도 종료할 수 없어. 새로고침해도 켜져있는 상태가 유지가 된다.

그 때 종료하는 방법,

 

ps -ef 하면 현재 프로그램들 목록 볼 수 있어.

ps -ef | (앞의 명령어 가지고 뒤에 명령어를 처리함) grep node