[GitHub] Codespaces, Actions

[실습] GitHub Codespaces

Opening in codespace를 클릭하면, 웹 상에서 vscode가 열리면서 코드를 수정할 수 있다.

# OS 정보
cat /etc/os-release

# 환경 정보
printenv -0 | sort -z | tr '\0' '\n'

# Node 버전 확인 및 변경
node --version 		# v20.18.1
nvm install --lts
nvm use --lts		# Now using node v22.13.0 (npm v10.9.2)
node --version 		# v22.13.0

@doraemon49 ➜ /workspaces/SKT_FLY_AI-guestbook (main) $ cat /etc/os-release
NAME="Ubuntu"
VERSION="20.04.6 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.6 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal

@doraemon49 ➜ /workspaces/SKT_FLY_AI-guestbook (main) $ printenv -0 | sort -z | tr '\0' '\n'
BROWSER=/vscode/bin/linux-x64/91fbdddc47bc9c09064bf7acf133d22631cbf083/bin/helpers/browser.sh
CLOUDENV_ENVIRONMENT_ID=17d94b1a-d490-4bd1-8069-b9e8be1195a2
CODESPACES=true
CODESPACE_NAME=improved-broccoli-q4xg79q6v64hqv9
CODESPACE_VSCODE_FOLDER=/workspaces/SKT_FLY_AI-guestbook
COLORTERM=truecolor
CONDA_DIR=/opt/conda
CONDA_SCRIPT=/opt/conda/etc/profile.d/conda.sh
ContainerVersion=13
DEBIAN_FLAVOR=focal-scm
DOCKER_BUILDKIT=1
DOTNET_ROOT=/usr/share/dotnet
DOTNET_RUNNING_IN_CONTAINER=true
DOTNET_SKIP_FIRST_TIME_EXPERIENCE=1
DOTNET_USE_POLLING_FILE_WATCHER=true
DYNAMIC_INSTALL_ROOT_DIR=/opt
ENABLE_DYNAMIC_INSTALL=true
GEM_HOME=/usr/local/rvm/gems/ruby-3.3.4
GEM_PATH=/usr/local/rvm/gems/ruby-3.3.4:/usr/local/rvm/gems/ruby-3.3.4@global
GITHUB_API_URL=https://api.github.com
GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN=app.github.dev
GITHUB_CODESPACE_TOKEN=AOD7A2RHACUUIFAJACMJKL3HREQFJANCNFSM4ALJDS2A
GITHUB_GRAPHQL_URL=https://api.github.com/graphql
GITHUB_REPOSITORY=doraemon49/SKT_FLY_AI-guestbook
GITHUB_SERVER_URL=https://github.com
GITHUB_TOKEN=ghu_3luDrdngQLD6NPbhUSI2R9xI8CikHU4U9YlC
GITHUB_USER=doraemon49
GIT_ASKPASS=/vscode/bin/linux-x64/91fbdddc47bc9c09064bf7acf133d22631cbf083/extensions/git/dist/askpass.sh
GIT_EDITOR=code --wait
GOPATH=/go
GOROOT=/usr/local/go
GRADLE_HOME=/usr/local/sdkman/candidates/gradle/current
HOME=/home/codespace
HOSTNAME=codespaces-2a5cad
HUGO_DIR=/usr/local/hugo/bin
HUGO_ROOT=/home/codespace/.hugo
INTERNAL_VSCS_TARGET_URL=https://southeastasia.online.visualstudio.com
IRBRC=/usr/local/rvm/rubies/ruby-3.3.4/.irbrc
JAVA_HOME=/usr/local/sdkman/candidates/java/current
JAVA_ROOT=/home/codespace/java
JUPYTERLAB_PATH=/home/codespace/.local/bin
LANG=C.UTF-8
LESSCLOSE=/usr/bin/lesspipe %s %s
LESSOPEN=| /usr/bin/lesspipe %s
LS_COLORS=rs=0:di=01;34:ln=01;36:mh=00:pi=40;33:so=01;35:do=01;35:bd=40;33;01:cd=40;33;01:or=40;31;01:mi=00:su=37;41:sg=30;43:ca=30;41:tw=30;42:ow=34;42:st=37;44:ex=01;32:*.tar=01;31:*.tgz=01;31:*.arc=01;31:*.arj=01;31:*.taz=01;31:*.lha=01;31:*.lz4=01;31:*.lzh=01;31:*.lzma=01;31:*.tlz=01;31:*.txz=01;31:*.tzo=01;31:*.t7z=01;31:*.zip=01;31:*.z=01;31:*.dz=01;31:*.gz=01;31:*.lrz=01;31:*.lz=01;31:*.lzo=01;31:*.xz=01;31:*.zst=01;31:*.tzst=01;31:*.bz2=01;31:*.bz=01;31:*.tbz=01;31:*.tbz2=01;31:*.tz=01;31:*.deb=01;31:*.rpm=01;31:*.jar=01;31:*.war=01;31:*.ear=01;31:*.sar=01;31:*.rar=01;31:*.alz=01;31:*.ace=01;31:*.zoo=01;31:*.cpio=01;31:*.7z=01;31:*.rz=01;31:*.cab=01;31:*.wim=01;31:*.swm=01;31:*.dwm=01;31:*.esd=01;31:*.jpg=01;35:*.jpeg=01;35:*.mjpg=01;35:*.mjpeg=01;35:*.gif=01;35:*.bmp=01;35:*.pbm=01;35:*.pgm=01;35:*.ppm=01;35:*.tga=01;35:*.xbm=01;35:*.xpm=01;35:*.tif=01;35:*.tiff=01;35:*.png=01;35:*.svg=01;35:*.svgz=01;35:*.mng=01;35:*.pcx=01;35:*.mov=01;35:*.mpg=01;35:*.mpeg=01;35:*.m2v=01;35:*.mkv=01;35:*.webm=01;35:*.ogm=01;35:*.mp4=01;35:*.m4v=01;35:*.mp4v=01;35:*.vob=01;35:*.qt=01;35:*.nuv=01;35:*.wmv=01;35:*.asf=01;35:*.rm=01;35:*.rmvb=01;35:*.flc=01;35:*.avi=01;35:*.fli=01;35:*.flv=01;35:*.gl=01;35:*.dl=01;35:*.xcf=01;35:*.xwd=01;35:*.yuv=01;35:*.cgm=01;35:*.emf=01;35:*.ogv=01;35:*.ogx=01;35:*.aac=00;36:*.au=00;36:*.flac=00;36:*.m4a=00;36:*.mid=00;36:*.midi=00;36:*.mka=00;36:*.mp3=00;36:*.mpc=00;36:*.ogg=00;36:*.ra=00;36:*.wav=00;36:*.oga=00;36:*.opus=00;36:*.spx=00;36:*.xspf=00;36:
MAVEN_HOME=/usr/local/sdkman/candidates/maven/current
MAVEN_ROOT=/home/codespace/.maven
MY_RUBY_HOME=/usr/local/rvm/rubies/ruby-3.3.4
NODE_ROOT=/home/codespace/nvm
NPM_GLOBAL=/home/codespace/.npm-global
NUGET_XMLDOC_MODE=skip
NVM_BIN=/usr/local/share/nvm/versions/node/v20.18.1/bin
NVM_CD_FLAGS=
NVM_DIR=/usr/local/share/nvm
NVM_INC=/usr/local/share/nvm/versions/node/v20.18.1/include/node
NVM_SYMLINK_CURRENT=true
NVS_DIR=/usr/local/nvs
NVS_HOME=/usr/local/nvs
NVS_OS=linux
NVS_ROOT=/usr/local/nvs
NVS_USE_XZ=1
OLDPWD=/vscode/bin/linux-x64/91fbdddc47bc9c09064bf7acf133d22631cbf083
ORYX_DIR=/usr/local/oryx
ORYX_ENV_TYPE=vsonline-present
ORYX_PREFER_USER_INSTALLED_SDKS=true
ORYX_SDK_STORAGE_BASE_URL=https://oryx-cdn.microsoft.io
PATH=/usr/local/rvm/gems/ruby-3.3.4/bin:/usr/local/rvm/gems/ruby-3.3.4@global/bin:/usr/local/rvm/rubies/ruby-3.3.4/bin:/vscode/bin/linux-x64/91fbdddc47bc9c09064bf7acf133d22631cbf083/bin/remote-cli:/home/codespace/.local/bin:/home/codespace/.dotnet:/home/codespace/nvm/current/bin:/home/codespace/.php/current/bin:/home/codespace/.python/current/bin:/home/codespace/java/current/bin:/home/codespace/.ruby/current/bin:/home/codespace/.local/bin:/usr/local/python/current/bin:/usr/local/py-utils/bin:/usr/local/oryx:/usr/local/go/bin:/go/bin:/usr/local/sdkman/bin:/usr/local/sdkman/candidates/java/current/bin:/usr/local/sdkman/candidates/gradle/current/bin:/usr/local/sdkman/candidates/maven/current/bin:/usr/local/sdkman/candidates/ant/current/bin:/usr/local/rvm/gems/default/bin:/usr/local/rvm/gems/default@global/bin:/usr/local/rvm/rubies/default/bin:/usr/local/share/rbenv/bin:/usr/local/php/current/bin:/opt/conda/bin:/usr/local/nvs:/usr/local/share/nvm/versions/node/v20.18.1/bin:/usr/local/hugo/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/share/dotnet:/home/codespace/.dotnet/tools:/usr/local/rvm/bin
PHP_PATH=/usr/local/php/current
PHP_ROOT=/home/codespace/.php
PIPX_BIN_DIR=/usr/local/py-utils/bin
PIPX_HOME=/usr/local/py-utils
PROMPT_DIRTRIM=4
PWD=/workspaces/SKT_FLY_AI-guestbook
PYTHONIOENCODING=UTF-8
PYTHON_PATH=/usr/local/python/current
PYTHON_ROOT=/home/codespace/.python
RAILS_DEVELOPMENT_HOSTS=.githubpreview.dev,.preview.app.github.dev,.app.github.dev
RUBY_HOME=/usr/local/rvm/rubies/default
RUBY_ROOT=/home/codespace/.ruby
RUBY_VERSION=ruby-3.3.4
RVM_PATH=/usr/local/rvm
SDKMAN_CANDIDATES_API=https://api.sdkman.io/2
SDKMAN_CANDIDATES_DIR=/usr/local/sdkman/candidates
SDKMAN_DIR=/usr/local/sdkman
SDKMAN_PLATFORM=linuxx64
SHELL=/bin/bash
SHELL_LOGGED_IN=true
SHLVL=1
TERM=xterm-256color
TERM_PROGRAM=vscode
TERM_PROGRAM_VERSION=1.96.3
USER=codespace
VSCODE_GIT_ASKPASS_EXTRA_ARGS=
VSCODE_GIT_ASKPASS_MAIN=/vscode/bin/linux-x64/91fbdddc47bc9c09064bf7acf133d22631cbf083/extensions/git/dist/askpass-main.js
VSCODE_GIT_ASKPASS_NODE=/vscode/bin/linux-x64/91fbdddc47bc9c09064bf7acf133d22631cbf083/node
VSCODE_GIT_IPC_HANDLE=/tmp/vscode-git-999778329e.sock
VSCODE_IPC_HOOK_CLI=/tmp/vscode-ipc-f32b8728-02de-4b03-9b97-eb513de7978d.sock
_=/usr/bin/printenv
rvm_bin_path=/usr/local/rvm/bin
rvm_path=/usr/local/rvm
rvm_prefix=/usr/local
rvm_version=1.29.12 (latest)

@doraemon49 ➜ /workspaces/SKT_FLY_AI-guestbook (main) $ node --version
v20.18.1
@doraemon49 ➜ /workspaces/SKT_FLY_AI-guestbook (main) $ nvm install --lts
Installing latest LTS version.
Downloading and installing node v22.13.0...
Downloading https://nodejs.org/dist/v22.13.0/node-v22.13.0-linux-x64.tar.xz...
#################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v22.13.0 (npm v10.9.2)
@doraemon49 ➜ /workspaces/SKT_FLY_AI-guestbook (main) $ nvm use --lts
Now using node v22.13.0 (npm v10.9.2)
@doraemon49 ➜ /workspaces/SKT_FLY_AI-guestbook (main) $ node --version
v22.13.0

 

---

[실습] Visual Studio Code에서 GitHub Codespaces 실행

GitHub Codespacese 설치 및 로그인

 

Remote Explorer 메뉴로 들어가서, 연결.

왼쪽 하단의 Remote Window를 열어서, 맨 아래의 Disconnect 선택하여, 연결 해제.

---

GitHub Actions

• GitHub 저장소 기반 개발 Workflow 자동화 도구
• GitHub 내부에서 프로젝트 빌드, 테스트, 릴리즈, 배포 파이프라인 자동화
• GitHub에서 제공하는 CI/CD 플랫폼
• 리포지토리에 발생하는 이벤트 기반으로 Workflow 실행
• Workflow 실행
  • GitHub이 제공하는 크로스 플랫폼 가상 머신에서 Workflow 실행
  • 자체 데이터 센터나 클라우드 인프라의 자체 호스팅 Runner

[실습] GitHub Actions ; 배포 자동화

#1. Azure 포털 전역 검색에서 'App Services'로 검색

#2. App Services 블레이드에서 [+만들기]
*언급하지 않은 항목은 모두 기본 값 사용.
[기본 사항]
-리소스 그룹: rg-devopslab-kmkm
-이름: app-gbcode-kmkm
-게시: 코드
-런타임스택: Node 18 lts
-운영체제: 리눅스
-지역: <사전 지정한 지역>
-가격 책정 플랜: asp-devops-kmkm / S1
[배포]
-지속적인 배포: 사용
-GitHub 계정: 권한 부여
-조직: 자신의 GitHub 계정 이름
-리포지토리: guestbook
-분기: main
-기본 인증: 사용
[모니터링+보안]
- Application Insights: 아니오

# 2-1. 배포 센터 > 배포 슬롯
Name : staging
리소스 그룹: rg-devopslab-kmkm

#3. 코드 수정
- header.ejs, index.ejs 수정

#4. VSCode에서 Git 다루기 
- SCM에서 Stage 수행
- 커밋 메시지: first coding --> 커밋
- Sync Changes

#5. GitHub에서 Actions 확인

#6. 웹 사이트 확인

 

웹앱 만들고 > 배포 슬롯 만들기

 

나의 깃허브와 연결

 

수정한 파일을, GitHub에 올리자. 

Action에 보면, 자동으로 배포되고 있다!!

---

staging 쪽으로 배포되는 워크 플로우를 하나 더 만들자.

 

staging이 들어온 것을 확인할 수 있다.

 

이제 원래 것은 삭제하자.

(삭제 안 하면, 두가지 workspace 모두에 변경 사항이 똑같이 올라가버린다.)

내용을 수정하고, GitHub에 올리자.

또 자동으로 배포돼고 있다!

수정한 내용으로 'staging'에 변경되었다!

(원본에는 그대로 영어로 되어 있다.)

(new-entry는 잘못 올림,,)

---

원본(영어)와 staging(한글) 페이지를 SWAP 하자.

이제 원본 페이지가 한글로 변경되었다!!

 

배포 끝!