Next.JS 프로젝트를 GCP에 올려 봤어
GCP 계정 당연히 있어야 하고 난 mac 에서 vscode로 개발하니까 참고하고..
(한참 글쓰다가 알았는데 결제 설정 안해놨으면 안돼 ㅠㅠ 그러니까 결제 설정하고 따라하자.)
먼저 next.js 프로젝트를 만들자. 터미널에서
npx create-next-app test --typescript
code .typescript 싫은 사람은 뒤에 --typescript 빼도 되고~
해보나 마나 잘 돌겠지. ㅎㅎ 그래도 돌려봐 ㅎ
npm run dev역시 잘 돌지 ㅎㅎ 나는 3000번 포트에 하고 있는게 있어서 localhost:3001로 뜨는데 보통 3000번으로 뜨니까 헤깔리지 말고 니들은 localhost:3000으로 테스트햐.
그러면 흐미 지겨운거~ 허구헌날 보는 Welcome to Next.js!
App engine에 올리는 게 목적이니까 여기에서 아무것도 수정하지 말고 배포하자구. 이제 GCP 차례네.
GCP 콘솔에 접속해서 App engine으로 가자고~ 리소스 node.js 선택하고 나중에 배포 클릭. 프로젝트 없는 사람은.... 만들자!!
사실 지금부터 설명하는 것들 ->>>> https://cloud.google.com/sdk/docs/install-sdk 여기에 OS별로 친절하게 잘 설명되어 있어. 근데 이것도 보기 싫은 mac 유저들은 따라하던지 ㅎㅎ
빠른 시작: Google Cloud CLI 설치 | Google Cloud CLI 문서
Google Cloud CLI를 설치하고 몇 가지 핵심 gcloud CLI 명령어를 실행하는 방법을 알아봅니다.
cloud.google.com
gcloud sdk를 다운로드하고 몇가지 실행시켜 줘야 하는데 gcloud sdk는 python3 나 python 설치가 필요하다니까 없는 사람은 이것부터 설치하자. 구글이 python3 권장한다니까 알아두고~ 얼릉 설치 고고
스크롤 아래로 내리다보면 다운로드 링크 나오는데 자기 PC에 맞는 거 다운로드 받자~
난 맥북 에어 m1이라 중간 거 다운로드 -> 두고 두고 사용할 폴더에 압축 풀기.(난 /Users/내 이름/ 경로에 압축 풀었어)
그리고 나서 압축 푼 경로로 이동해서 install.sh를 실행시켜
./install.sh그러면 몇 개 물어보는데 Enter 연타하면 돼. 이거 하면 알아서 path 등록되니까 쓸데없이 이것저것 하지 말자.
그리고 /google-cloud-sdk/bin/ 으로 이동해서 gcloud 초기화 해주자.
./gcloud init그럼 프로젝트 이름이랑 리젼이랑 물어보는데 난 이전에 설정해 놓은게 있어서 새로 보여줄라고 logout도 해놓았고 설정도 test라는 이름으로 다시하는 겨~ 따라하지마~
보통은 configuration 이름이 default로 되어 있으니까 그걸로 하고 자기 프로젝트 이름이랑 리젼이랑 잘 골라서 하자. 설마 리젼 뭔지 몰라? 서버 위치 말하는 거고 서울이 asia-northeast-3 이야.
암튼 로그인 물어보는데 엔터 누르면 브라우져 새창으로 로그인 화면 떠. 로그인하면 되고 콘솔에서는 프로젝트 고르라고 나와 각자 만든 프로젝트 잘 골라주자~ 번호로 입력~
이 다음에는 리젼 물어보는데 -_- 난 왜 안뜨지?? 뭐 다음에 물어보겠지. 암튼 난 이걸로 세팅은 끝이야. 뭐 복잡해 보이는데 실제로 해보면 5분 컷이야.
이제 배포 해보자규~
먼저 next.js 프로젝트에 package.json 열어서 "deploy":"yarn build && gcloud app deploy" 추가해 주자. 굳이 설명하자면 빌드하고 배포하는거지.
그럼 터미널에서 npm run deploy 실행 고고! 그러면 에러가 뜨면서 안될거야 ㅎㅎㅎ app.yaml 파일이 없기 때문이지 훗.
app.yaml 파일을 next.js 루트 폴더에 생성해야 하는데 에러의 예제는 python 꺼니까 보면 안되고~ 아래 링크 걸어놨어. 나중에 배포 디테일하게 구성하려면 참고하고~
https://cloud.google.com/appengine/docs/standard/nodejs/config/appref
app.yaml 구성 파일 | Node.js 문서를 위한 App Engine 표준 환경 | Google Cloud
Node.js 16이 이제 정식 버전으로 제공됩니다. 의견 보내기 app.yaml 구성 파일 리전 ID REGION_ID는 앱을 만들 때 선택한 리전을 기준으로 Google에서 할당하는 축약된 코드입니다. 일부 리전 ID는 일반적
cloud.google.com
그런데 기본 예제가 돈 마이 나오는거니까 조심 ㅋㅋ F2 인스턴스 쓰면 안돼 비싸 ㅋ 가변으로 하던지 가장 싼거 B1으로 하던지 마음대로 하시고 난 일단 B1으로 app.yaml 파일 만들었어. 가장 싼 B1으로 하려면 manual scaling으로 해야 한다고 해서 아래 캡쳐처럼 구성해야해.
manual_scaling 구성 안하니까 아래 캡쳐 같은 에러가 나오더라구.
※ 긴급 추가!!!!!
app.yaml에 env:flex 로 하면 가변 인스턴스로 설정하는 건데 이걸로 해봤더니 하루만에 1400원 청구됐어! 조심해 친구들!
암튼 app.yaml 수정하고 npm run deploy 하니까 아까 안물어봤던 리젼 지금 물어보네. 니들은 이미 리전이 설정되어 있을 수도 있어~
서울이 asia-northeast3니까 고르고~ 엔터 누르면 빙글빙글 돌다가
하니까 결국 또 에러. 이번에는 사용 설정을 해야 한다고 하네.
아 씁 이거 돈 달라는 소리 같은데;;;;
ㅋㅋㅋ 블로그 쓰려고 무료 계정에 물렸더니... 참 쉽지 않구만...
에휴 다시 아래 명령으로 무료 계정 로그 아웃..
gcloud auth revoke --all그리고 다시 로그인.. 지친다 지쳐..
gcloud auth login그리고 결제 계정 있는 프로젝트로 설정 변경 ㅠㅠ 계정 선택, 프로젝트 선택, 리전 선택
gcloud init그리고 드디어 마지막 최후의 deploy!! 안되면 나가 뒤진다..... 했는데 되려나봐..ㅠㅠ 한참 걸리네 ㅠㅠ
배포가 끝나면 콘솔창에 나온 주소로 접속해도 되고 GCP 콘솔에서 App engine 대쉬보드에서 접속해도 되니까 아무렇게나 하자.
아이고 지친다. 그놈에 결제 계정...
일단 나는 Flex(가변 인스턴스)로 설정해놔서 과금은 거의 안되겠지만 혹시나 폭탄 있으면 글 업뎃할게. 안녕~
'Next.js' 카테고리의 다른 글
| Next.js NextUI (0) | 2022.06.08 |
|---|---|
| Next.js + styled-components + tailwindcss + SSR (6) | 2022.05.28 |
| Next.JS App engine 비용 (0) | 2022.05.26 |
| Next.JS Font optimization(웹 폰트 삽입 위치) (0) | 2022.05.25 |
| Next.JS Javascript disable test (0) | 2022.02.28 |