SSG 배포 (1) :: Storage에 정적 파일 배포하기

e_juhee·2022년 5월 3일
0

Deployment

목록 보기
3/9

next 앱을 새로 생성할 때, 기존의 프로젝트 안에서 만든 경우에는 git이 상위 폴더에도 있고 하위 폴더에도 있어서 충돌할 수 있으므로
.git 폴더를 지워줘야 한다. (없으면 상관 ㄴ)
만든 폴더의 터미널에서 ls-al 해서 있으면 지우긔

요로케 .git이 없어야 한당 👆🏻

SSG

[SSG vs SSR]

Static Site Generation

빌드할 때 페이지별로 HTML을 생성하고 요청을 받을 때마다 미리 만들어둔 것으로 응답하는 방식

html, css, js(정적 파일)을 Storage에 업로드해보자~

1. 파일을 빌드한다

build란! 기존의 파일들을 html, css, js 파일로 변환하는 과정을 말한다.

1. (폴더를 새로 만든 게 아니라면 생략 가능) react의 버전을 맞춰준다.

최근에 react 버전이 18로 올라가면서 대규모 패치가 이루어져서 이전 버전에서 만든 파일들과 호환이 안되는 부분이 있을 수 있다. 버전을 아래와 같이 맞춰주자.

(1) 버전 변경하고
(2) node_modulse 지우고
(3) yarn install ㄱㄱ

'Cannot find module 'next/babel'' 에러가 난다면
devDependencies에 있는 것도 아래처럼 만들어주자.
("eslint-config-next": "12.1.6" 지웠음)

package.json

  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "8.14.0"
  }

2. build 명령어를 수정한다.

package.json

build 부분을 아래처럼 바꿔준다.

    "build:ssg": "next build && next export",
    "build:ssr": "next build",
  • yarn build
    yarn start를 하기 위해서는 최적화 과정을 거쳐야 한다.(build 과정)
    build를 먼저 해야 start를 할 수 있다.
    build를 하면 폴더가 생긴다.

  • build:ssg 명령어는 storage에 올리는 정적파일을 만들기 위해서 쓴다.
    ( next export : html, css, js가 만들어진다.)

  • build:ssrstart 명령어는 SSR을 할 때 쓴다.

  • build:ssg 할 때 주의사항
    : SSR이 필요한 페이지(getServerSideProps 함수가 들어있는 페이지)가 섞여있으면 변환이 되지 않고 에러가 난다. ('정적 파일을 만들 수 없습니다.')

참고

  • yarn dev
    yarn dev를 하고 나서 코드를 수정하면 refresh됨
  • yarn start
    배포할 때 쓰는 명령어!
    내용을 변경해도 refresh 되지 않는다.
    지금은 일단 build를 먼저 해야되니까 알아만 두자.
    (build를 먼저 해야 start를 할 수 있다.)

3. 정적 파일로 변환할 수 없는 부분 제거

/index.js
next.js에서 제공해주는 Image 컴포넌트가 있으면 정적 파일을 만들 수 없다.
루트의 index.js 파일의 import 부분과 사용하는 부분을 주석처리해주자!

4. trailingSlash: true 추가

(5번 먼저 하고 해야 할 수도 있음...ㅎㅎ)

5번에서 yarn build를 하면 out 폴더가 생기는데, pages의 폴더와 구조를 비슷하게 만들어주기 위해서 trailingSlash를 추가한다. (마지막 슬래시를 추가한다는 의미이다.)

next.config.js

5. 터미널에서 yarn build:ssg ㄱㄱ

yarn build:ssg
  • build 명령어에 적었던 "next build && next export"에서 앞부분인 next build로 만들어지는 부분이 .next 폴더
    SSR 할 때 쓰인다.

  • "next build && next export"에서 뒷부분인 next export로 만들어지는 부분이 out 폴더 👉🏻 요것이 최적화된 파일이다.
    SSG를 할 때 쓰인다.
    .next가 잇어야 out 폴더가 만들어진다.

6. out 폴더를 Finder에서 열어놓자.

왜냐하면,, 이거를 업로드 할 거니까 ~~

2. GCP 버킷에 파일을 업로드한다.

1. GCP로 이동

[브라우저]

메뉴 > Cloud Storage > 브라우저

요기에 큰 규모의 이미지나 동영상 같은 파일들을 넣어두고 다운 받아서 쓴다.
정적 파일을 여기에 업로드할 것이다.

2. 버킷 만들기

버킷은 파일을 업로드할 폴더라고 생각하면 된다.

  • 버킷 이름 지정: 맘대루
  • 데이터 저장 위치 선택: Multi-region - asia
    가까울수록 다운로드 속도가 빠르다
  • 계속 > 계속 > 만들기

3. 만들어진 폴더 안에 파일을 업로드

drag n drop 해서 out 폴더 안의 파일들을 넣는다.

파일들이 다 들어가야되는데..
하나만 들어가면 명령어로 배포를 해야 한다.ㅠㅡㅠ

3-1. 명령어로 파일 업로드하기

9번에서 파일들이 다 들어갔으면 9-1은 안해도 된다! 부럽다

(1) 우측 상단의 알아보기

(2) 가이드

(3) 버킷에 데이터 업로드

👇🏻 이 명령어를 입력하면 파일이 업로드된다.

💡 어디서 명령어를 실행하지??
Google Cloud에서는 무료로 Shell이라는 컴퓨터를 빌려준다.

(4) 올릴 파일들을 git에 먼저 올린다.
shell에서 clone 받아서 쓸 거라서!
vsc로 돌아와서 > git add . > git commit >git push origin master

(5) 우측 상단의 Cloud Shell 활성화 아이콘 클릭

아이콘을 누르면 하단에 터미널이 생긴다.

(6) shell에서 내 파일 git clone 받기
git은 이미 설치되어있다. 휴 ~

git clone 내깃헙주소

VSC에서 내 github 주소 확인하기
git remote -v

요거 복사해서 shell에 입력하면 된다.

(7) shell에서 배포할 폴더로 들어가서 out 폴더를 만들어죠
cd 폴더명 > yarn install > yarn build:ssg

out 폴더가 나왔다고 하면 된거다
(사실 나는 안 떴는데 됐음..ㅋ)

(8) out 폴더 안의 모든 파일을 storage에 올려

gsutil cp -r ./out/*gs://버킷이름

/* : out 폴더 자체가 아니라 그 안의 파일들이란 의미
-r : recursive라는 뜻으로, 폴더 안의 있는 것까지 계속 들어가서 전부 다 해달라는 의미
gs: Google Stroage

(9) 승인

(10) 끗
새로고침해서 파일들이 잘 들어갔는지 확인~

3. 기본 셋팅 ㄱㄱ

1. 접근 권한 수정

(1) 목록 화면으로 돌아와서 방금 만든 폴더의 공개 액세스 열에 있는 '공개 아님'을 클릭 > 액세스 수정

(2) 주 구성원 추가

(3) 새 주 구성원: 'allUsers' & 역할: 'Cloud Storage > 저장소 개체 뷰어' 입력하고 저장

(4) 공개 액세스 허용

(5) 공개 아님이 인터넷에 공개로 바뀌면 된거임 👍🏻

2. 웹사이트 구성 수정

(1) 10과 동일하게 목록 화면의 방금 만든 폴더에서 더보기 아이콘 클릭 > 웹사이트 구성 수정

(2) 입력 > 저장

  • 색인(기본) 페이지 서픽스 : index.html (접속하면 보여줄 파일 이름)
  • 오류 페이지: 404/index.html (에러가 나면 보여줄 파일 이름)
profile
쥐로그

0개의 댓글