next 앱을 새로 생성할 때, 기존의 프로젝트 안에서 만든 경우에는 git이 상위 폴더에도 있고 하위 폴더에도 있어서 충돌할 수 있으므로
.git 폴더를 지워줘야 한다. (없으면 상관 ㄴ)
만든 폴더의 터미널에서ls-al해서 있으면 지우긔
요로케
.git이 없어야 한당 👆🏻
SSG
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:ssr과start명령어는 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번에서 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. 명령어로 파일 업로드하기
3번에서 파일들이 다 들어갔으면 3-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 (에러가 나면 보여줄 파일 이름)
