티스토리 뷰

Google Cloud/Qwiklabs Advanced

[Qwiklabs Advanced]구글 클라우드에 웹사이트 빌드하기-1부 -(Using Google Compute Engine)

로또_ 2020. 10. 5. 22:56

이번 포스팅에서는 Compute Engine을 이용하여 웹사이트를 빌드해볼 거예요. 내용이 많아 1,2부로 나누어서 올릴 예정입니다. 아래 목차에서 4번까지 이번에는 진행하겠습니다.Cloud Build보다 좀 복잡하고 내용이 길지만 열심히 같이 해봤으면 좋겠어요! 궁금한 사항 있으시면 댓글 남겨주세요~

-1부-

이번 포스팅에서는 Compute Engine을 이용하여 웹사이트를 빌드해볼 거예요. 내용이 많아 1,2부로 나누어서 올릴 예정입니다. 아래 목차에서 4번까지 이번에는 진행하겠습니다.Cloud Build보다 좀 복잡�

puzzle-puzzle.tistory.com

-2부-

[Qwiklabs Advanced]구글 클라우드에 웹사이트 빌드하기-2부-(Using Google Compute Engine)

1부에서 이어서 설명하도록 하겠습니다. 구글 클라우드에 웹사이트 빌드하기 1부를 못 보고오신 분들은 아래의 포스팅을 보고 오시면 됩니다. [Qwiklabs Advanced]구글 클라우드에 웹사이트 빌드하기

puzzle-puzzle.tistory.com

1. Compute Engine API 이용하기
2. GCS(Google Cloud Storage) 버킷 만들기
3. 소스 저장소 복제하기
4. GCE(Google Compute Engine) instaces 생성하기
5. Managed Instance Groups 생성하기
6. 로드 밸런서 생성하기
7. Compute Engine 스케일링하기
8. 웹사이트 업데이트하기

실습을 시작하기 전에 기본 zone을 설정합니다. 실습에서는 미국의 zone을 설정하는데 한국으로 설정하셔도 상관없습니다.

Enable Compute Engine API

Compute Engine API를 사용합니다.

Create GCS bucket

Cloud Storage bucket을 사용하여 시작 스크립트와 함께 빌드 코드를 저장하세요

Clone source repository

Cloud shell에 다음과 같이 입력합니다. 기존 웹 사이트를 배포하는 것이므로 소스 복제만 하면 됩니다. Docker image 생성과 Compute Engine에만 집중할 수 있습니다.

그리고 로컬에서 애플리케이션을 실행하기 위해 초기 빌드 코드를 실행합니다.

위의 과정이 끝내기까지 몇 분이 소요될 수 있습니다.

완료된 후, 애플리케이션을 테스트하기 위해 microservices 디렉터리로 이동하고 웹서버를 실행합니다.

Output:

Preview on port 8080 버튼을 클릭하여 미리 볼 수 있습니다.

Create GCE instances

이제 Compute Engine instance를 배치해보겠습니다.

아래의 단계로 진행됩니다.

instance를 구성할 시작 스크립트를 생성
소스코드를 복사하고 Google Cloud Storage에 업로드
백엔드 마이크로 서비스를 호스팅 할 Compute Engine instance를 배포
백엔드 마이크로 서비스 instance를 활용하도록 프론트엔드 코드를 재구성
백엔드 마이크로 서비스 instance를 호스팅 할 Compute Engine instance를 배포
통신이 가능하게 네트워크를 구성

1. Create Startup Scripts

시작 스크립트는 시작할 때마다 instance에게 수행할 작업을 지시하는 데 사용됩니다. 이러한 방식은 instance가 자동으로 구성되게 합니다.

Cloud Shell ribbon에서 연필 아이콘을 클릭하여 코드 편집기를 엽니다. 그 후에 monolith-to-microservices 폴더로 이동하고 File > New File을 클릭하여 startup-script.sh 파일을 만듭니다.

해당 파일에 아래의 코드를 삽입합니다. 그리고 코드 중에서 [DEVSHELL_PROJECT_ID]을 자신의 프로젝트 이름으로 대체합니다.

#!/bin/bash


# Install logging monitor. The monitor will automatically pick up logs sent to
# syslog.
curl -s "https://storage.googleapis.com/signals-agents/logging/google-fluentd-install.sh" | bash
service google-fluentd restart &

# Install dependencies from apt
apt-get update
apt-get install -yq ca-certificates git build-essential supervisor psmisc

# Install nodejs
mkdir /opt/nodejs
curl https://nodejs.org/dist/v8.12.0/node-v8.12.0-linux-x64.tar.gz | tar xvzf - -C /opt/nodejs --strip-components=1
ln -s /opt/nodejs/bin/node /usr/bin/node
ln -s /opt/nodejs/bin/npm /usr/bin/npm

# Get the application source code from the Google Cloud Storage bucket.
mkdir /fancy-store
gsutil -m cp -r gs://fancy-store-[DEVSHELL_PROJECT_ID]/monolith-to-microservices/microservices/* /fancy-store/

# Install app dependencies.
cd /fancy-store/
npm install

# Create a nodeapp user. The application will run as this user.
useradd -m -d /home/nodeapp nodeapp
chown -R nodeapp:nodeapp /opt/app

# Configure supervisor to run the node app.
cat >/etc/supervisor/conf.d/node-app.conf << EOF
[program:nodeapp]
directory=/fancy-store
command=npm start
autostart=true
autorestart=true
user=nodeapp
environment=HOME="/home/nodeapp",USER="nodeapp",NODE_ENV="production"
stdout_logfile=syslog
stderr_logfile=syslog
EOF

supervisorctl reread
supervisorctl update

클라우드 쉘 코드 에디터 : "End of Line Sequence"가 "LF"로 세팅되어야 합니다. 만약 "CRLF"로 설정되어 있다면 "LF"로 변경해주세요.

startup scripts에는 다음 작업을 수행합니다 :

Logging 에이전트를 설치합니다. 에이전트는 syslog에서 로그를 자동으로 수집합니다.
Node.js와 Supervisor를 설치합니다. Supervisor가 데몬으로 앱을 실행합니다.
GCS 버킷에서 앱의 소스코드를 복제하고 dependencies를 설치합니다.
앱을 실행하기 위해 Supervisor를 설정합니다. Supervisor는 앱이 예기치 않게 종료되거나 관리자 또는 프로세스에 의해 중지되는 경우 앱이 재시작되는지 확인합니다. 또한 Logging 에이전트가 수집할 수 있도록 앱의 stdout 및 stderr를 syslog로 전송합니다.

다음의 코드를 실행시켜 startup-scripts.sh를 버킷으로 복사합니다.

이제 다음에 접근 가능합니다.

[BUCKET_NAME]은 Cloud Storage Bucket의 이름을 나타냅니다. 이는 기본적으로 인증된 사용자와 서비스 계정만 볼 수 있습니다. 그러므로 웹 브라우저를 통해 볼 수 없습니다. Compute Engine instances는 서비스 계정을 통해 자동적으로 액세스 할 수 있습니다.

2. Copy code into Cloud Storage bucket

인스턴스가 실행되면 Cloud Stroage bucket에서 코드를 pull 합니다. 그리고 코드의. env 파일에 일부 구성 변수를 저장할 수 있습니다.

*환경변수를 다른 곳에서 끌어오기 위해 코딩할 수도 있지만, 실습 목적을 위해 미리 작성된 코드를 가지고 사용합니다. 실제 제작에서는 환경변수가 저장된 외부 코드에서 사용될 수 있습니다.

다음의 코드를 실행시켜 코드를 버킷에 복사합니다.

*위의 코드를 보면 node_modeuls dependencies directories는 가능한 빠르고 효율적인 복사를 위해 삭제됩니다. 이것들은 시작할 때 재생성됩니다.

3.Deploy backend instance

첫 번째로 배치되는 instance는 Order와 Products 마이크로 서비스를 수용하는 백엔드 instance가 됩니다.

다음 명령을 실행하여 startup scripts를 사용하도록 구성된 n1-standard-1 instance를 생성합니다. 백엔드 instance로 태그가 지정되므로 나중에 특정 방화벽 규칙을 적용할 수 있습니다.

4. Configure connection to backend

프론트엔드 애플리케이션을 배포하기 전에 방금 배포한 백엔드를 가리키도록 구성을 업데이트해야 합니다.

다음 명령을 사용하여 백엔드의 외부 IP주소를 검색하세요. EXTERNAL_IP 탭을 보면 됩니다.

Output: 예시이므로 사용자마다 다르게 표현됩니다.

백엔드의 External IP를 복사하시면 됩니다.

Cloud Shell 익스플로러에서 monolith-to-microservices > react-app으로 이동하세요. 그 후. env 파일을 보기 위해 Code Editor에서 View > Toggle Hidden Files로 이동하세요

. env파일을 편집하여 백엔드의 External IP를 가리킵니다. [BACKEND_ADDRESS]는 gcloud 명령으로 결정된 백엔드 인스턴스의 External IP 주소를 나타냅니다.

. env 파일에서 localhost로 되어있는 부분을 [BACKEND_ADDRESS]로 교체합니다. 그리고 저장합니다.

프론트엔드 코드를 업데이트하는 react-app을 재 빌드합니다.

그리고 Cloud Storage bucket에 애플리케이션 코드를 복사합니다.

5. Deply frontend instance

코드가 구성되었으므로 프론트엔드 instance를 배포합니다.

이전과 유사한 명령어로 프론트엔드 instance를 배포하기 위해 다음을 실행합니다. 이 instance는 방화벽 목적을 위해 프론트엔드 태그로 저장됩니다.

*배포 명령과 start-up scripts는 프론트엔드 및 백엔드 instance와 함께 사용되며, 기본적으로 모든 마이크로 서비스를 시작하도록 코드가 구성되어있습니다. 그 결과, 이 샘플의 프론트엔드와 백엔드 모두에서 모든 마이크로 서비스가 실행됩니다. Production 환경에서는 각 구성 요소에 필요한 마이크로 서비스만 실행해야 합니다.