Docs (#2)

* Initial commit * Add workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow * Update workflow (#1) * Update workflow * Update workflow * Update workflow * Update workflow
devkimchi · Dec 17, 2019 · 2b494d0 · 2b494d0
1 parent 6a49c61
commit 2b494d0
Show file tree

Hide file tree

Showing 18 changed files with 707 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*.local.json
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,51 @@
+# 사전 준비 사항 #
+
+모든 실습은 커맨드라인과 비주얼 스튜디오 코드, 웹 브라우저만을 통해 진행합니다.
+
+* [윈도우 사용자](#windows)
+* [맥 사용자](#mac)
+* [리눅스 사용자](#linux)
+
+
+## 가정 ##
+
+워크샵 참가자는 아래 내용을 알고 있다고 가정합니다.
+
+* 깃헙에서 상대방 계정의 리포지토리를 내 계정으로 포크해 올 수 있다.
+* 기본적인 깃 명령어를 커맨드라인에서 사용할 수 있다.
+
+
+<a name="windows"></a>
+## 윈도우 사용자 ##
+
+* [애저 무료 계정](https://azure.microsoft.com/ko-kr/free/?WT.mc_id=pwaazureworkshop-event-juyoo)
+* [윈도우용 git](https://git-scm.com/download/win)
+* [비주얼 스튜디오 코드](https://code.visualstudio.com/docs/setup/windows?WT.mc_id=pwaazureworkshop-event-juyoo)
+* [애저 CLI](https://docs.microsoft.com/ko-kr/cli/azure/install-azure-cli-windows?view=azure-cli-latest&WT.mc_id=pwaazureworkshop-event-juyoo)
+* [마이크로소프트 에지](https://www.microsoftedgeinsider.com/ko-kr/download/?WT.mc_id=pwaazureworkshop-event-juyoo)
+
+
+<a name="mac"></a>
+## 맥 사용자 ##
+
+* [애저 무료 계정](https://azure.microsoft.com/ko-kr/free/?WT.mc_id=pwaazureworkshop-event-juyoo)
+* [비주얼 스튜디오 코드](https://code.visualstudio.com/docs/setup/mac?WT.mc_id=pwaazureworkshop-event-juyoo)
+* [애저 CLI](https://docs.microsoft.com/ko-kr/cli/azure/install-azure-cli-macos?view=azure-cli-latest&WT.mc_id=pwaazureworkshop-event-juyoo)
+* [마이크로소프트 에지](https://www.microsoftedgeinsider.com/ko-kr/download/?WT.mc_id=pwaazureworkshop-event-juyoo)
+
+
+<a name="linux"></a>
+## 리눅스 사용자 ##
+
+* [애저 무료 계정](https://azure.microsoft.com/ko-kr/free/?WT.mc_id=pwaazureworkshop-event-juyoo)
+* [비주얼 스튜디오 코드](https://code.visualstudio.com/docs/setup/linux?WT.mc_id=pwaazureworkshop-event-juyoo)
+* [애저 CLI](https://docs.microsoft.com/ko-kr/cli/azure/install-azure-cli-linux?view=azure-cli-latest&WT.mc_id=pwaazureworkshop-event-juyoo)
+* [구글 크롬](https://chrome.google.com)
+
+
+## 실습 ##
+
+* [Step 01](step-01.md)
+* [Step 02](step-02.md)
+* [Step 03](step-03.md)
+* [Step 04](step-04.md)
diff --git a/docs/step-01.md b/docs/step-01.md
@@ -0,0 +1,94 @@
+# 애저 리소스 프로비저닝 #
+
+## 애저 포탈 ##
+
+### 애저 리소스 프로비저닝 ###
+
+애저 포탈에서 직접 한꺼번에 리소스를 프로비저닝하기 위해서는 아래 버튼을 클릭합니다.
+
+<a href="https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2Fdevkimchi%2Fpwa-workshop%2Fmaster%2Fresources%2Fazuredeploy.json" target="_blank"><img src="https://raw.githubusercontent.com/Azure/azure-quickstart-templates/master/1-CONTRIBUTION-GUIDE/images/deploytoazure.png" /></a>
+
+로그인 후에는 아래와 같은 화면이 보입니다. 여기서 기본값이 지정되어 있지 않은 곳은 임의로 값을 지정하여 입력합니다.
+
+![](../images/step-01-01.png)
+
+
+### 애저 리소스 삭제 ###
+
+아래 그림과 같이 리소스 그룹 전체를 삭제합니다. 이 버튼을 클릭하면 이 리소스 그룹 안에 있는 모든 리소스들을 삭제시킵니다.
+
+![](../images/step-01-02.png)
+
+
+## 애저 CLI ##
+
+### 리포지토리 포크 ###
+
+아래 리포지토리를 본인의 계정으로 포크합니다. 모든 실습은 본인의 계정으로 포크한 리포지토리를 통해 진행합니다.
+
+> https://github.com/devkimchi/pwa-workshop
+
+
+### 리포지토리 클론 ###
+
+파워셸 콘솔 혹은 터미널에서 아래와 같은 명령어를 입력합니다.
+
+```bash
+git clone https://github.com/<username>/pwa-workshop.git
+```
+
+
+### 애저 CLI 로그인 ###
+
+```bash
+az login
+```
+
+
+### 애저 리소스 그룹 생성 ###
+
+```bash
+az group create \
+  -n <RESOURCE_GROUP_NAME> \
+  -l koreacentral \
+  --verbose
+```
+
+
+### ARM 템플릿 실행 ###
+
+먼저 아래와 같이 `azuredeploy.parameters.json` 파일을 수정합니다.
+
+```json
+{
+  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
+  "contentVersion": "1.0.0.0",
+  "parameters": {
+    "storageAccountNames": {
+      "value": "[COMMA_DELIMITED_STORAGE_ACCOUNT_NAME]"
+    },
+    "keyVaultName": {
+      "value": "[KEY_VAULT_NAME]"
+    }
+  }
+}
+```
+
+그리고 난 후 아래 커맨드를 실행시킵니다.
+
+```bash
+az group deployment create \
+  -n storage-account \
+  -g <RESOURCE_GROUP_NAME> \
+  --template-file resources/azuredeploy.json \
+  --parameters @resources/azuredeploy.parameters.json \
+  --verbose
+```
+
+> **트러블슈팅**: 만약 ARM 템플릿 실행에 실패할 경우, 앞서 애저 포탈을 통해 만들었던 애저 키 저장소가 완벽하게 지워지지 않았을 수도 있습니다. 이럴 땐 아래 명령어를 통해 애저 키 저장소를 수동으로 완전히 삭제합니다.
+> ```bash
+> az keyvault purge \
+>   -n <KEY_VAULT_NAME> \
+>   -l koreacentral \
+>   --verbose
+> ```
diff --git a/docs/step-02.md b/docs/step-02.md
@@ -0,0 +1,68 @@
+# 로컬에서 애저로 PWA 수동 배포 #
+
+## 애저 블롭 저장소 환경 설정 ##
+
+애저 블롭 저장소를 정적 웹사이트 호스팅으로 활용하기 위해서는 아래와 같이 설정을 변경해 주어야 합니다.
+
+```bash
+az storage blob service-properties update \
+  --account-name <BLOB_STORAGE_NAME> \
+  --static-website true \
+  --index-document index.html \
+  --404-document 404.html \
+  --verbose
+```
+
+
+## 애저 블롭 저장소 URL 확인 ##
+
+정적 웹사이트 호스팅을 위한 주소를 아래 명령어를 통해 확인합니다.
+
+```bash
+az storage account show \
+  -g <RESOURCE_GROUP_NAME> \
+  -n <BLOB_STORAGE_NAME> \
+  --verbose
+```
+
+
+## PWA 패키지 복원 ##
+
+로컬에서 PWA를 실행시키기 위해서 우선 npm 패키지를 복원합니다.
+
+```bash
+npm install
+```
+
+
+## PWA 로컬 빌드 ##
+
+로컬에서 PWA를 빌드합니다.
+
+```bash
+npm run build
+```
+
+
+## PWA 로컬 테스트 (이부분 현재 꺠지는 중) ##
+
+로컬에서 PWA를 테스트합니다.
+
+```bash
+npm run test
+```
+
+
+## 애저 CLI를 이용한 PWA 수동 배포 ##
+
+애저 CLI를 이용해서 PWA를 애저 블롭 저장소로 수동 배포합니다.
+
+```bash
+az storage blob upload-batch \
+  -s build \
+  -d \$web \
+  --account-name <BLOB_STORAGE_NAME> \
+  --verbose
+```
+
+배포가 끝난 후, 앞서 확인했던 애저 블롭 저장소 URL을 통해 웹사이트로 접속해 봅니다.
diff --git a/docs/step-03.md b/docs/step-03.md
@@ -0,0 +1,113 @@
+# 깃헙 액션을 통해 애저로 PWA 자동 배포 #
+
+## 깃헙 액션 워크플로우 파일 생성 ##
+
+아래와 같이 워크플로우 파일을 생성합니다.
+
+* 디렉토리: `.github/workflows`
+* 파일이름: `main.yaml`
+* 파일내용:
+
+```yaml
+name: <WORKFLOW_NAME>
+on: <EVENT>
+jobs:
+  <JOB_NAME>:
+    runs-on: <RUNNER>
+    steps:
+    - name: <ACTION_NAME>
+      uses: <ACTION>
+```
+
+
+## 깃헙 액션 워크플로우 파일 작성 ##
+
+아래와 같이 워크플로우 파일을 수정합니다.
+
+```yaml
+name: Publish Static Web App to Azure Blob Storage
+
+on: push
+
+jobs:
+  build_and_publish:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout the repo
+      uses: actions/checkout@v1
+```
+
+여기까지 수정한 후 워크플로우 파일을 리포지토리로 푸시합니다.
+
+```bash
+git add -A
+git status
+git commit -m <COMMIT_MESSAGE>
+git push origin master
+```
+
+그리고 결과를 확인합니다. 다음에 아래 액션을 추가합니다.
+
+```yaml
+    - name: Login to Azure
+      uses: Azure/login@v1
+      with:
+        creds: ${{ secrets.AZURE_CREDENTIALS }}
+```
+
+여기까지 수정한 후 푸시합니다. 그리고 결과를 확인합니다. 여기서 액션이 실패합니다.
+
+
+### 애저 로그인 자격증명 설정 ###
+
+아래 명령어를 통해 애저 로그인을 위한 자격증명 값을 생성합니다.
+
+```bash
+az ad sp create-for-rbac \
+  --n <SERVICE_PRINCIPAL_NAME> \
+  --sdk-auth
+```
+
+이 명령어 실행 결과로 만들어지는 JSON 객체 값을 시크릿 변수 `AZURE_CREDENTIALS`에 할당합니다.
+
+![](../images/step-03-01.png)
+
+깃헙 리포지토리의 액션 탭에서 다시 워크플로우를 실행시킵니다. 이제는 성공합니다. 다음에 아래 액션을 추가합니다.
+
+```yaml
+    - name: Install npm packages
+      shell: bash
+      run: |
+        npm install
+
+    - name: Build app
+      shell: bash
+      run: |
+        npm run build
+
+    # - name: Test app
+    #   shell: bash
+    #   run: |
+    #     npm run test
+```
+
+여기까지 수정한 후 푸시합니다. 그리고 결과를 확인합니다. 다음에 아래 액션을 추가합니다. 다시 실패하는 것을 확인합니다.
+
+```yaml
+    - name: Publish app
+      uses: Azure/[email protected]
+      with:
+        azcliversion: latest
+        inlineScript: |
+          az storage blob upload-batch -s build -d \$web --account-name ${{ secrets.STORAGE_ACCOUNT_NAME }}
+```
+
+
+### 애저 블롭 저장소 이름 설정 ###
+
+마찬가지로 `STORAGE_ACCOUNT_NAME` 값을 애저 블롭 저장소 이름으로 설정합니다.
+
+![](../images/step-03-02.png)
+
+깃헙 리포지토리의 액션 탭에서 다시 워크플로우를 실행시킵니다. 이제는 성공합니다.