Merge pull request #2 from samuikaze/dev

Merge into main branch

.dockerignore

@@ -1,2 +1,5 @@
 node_modules
 dist
+.github
+.kubernetes
+.vscode

.github/workflows/build-push-deploy.yml

@@ -13,23 +13,23 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: lsgames-frontend-runner
     # 上面已經宣告何時執行了，這邊可以不用再次宣告
     # main branch only
     # if: github.ref == 'refs/heads/main'
     steps:
     - name: Checkout
       uses: actions/checkout@v3
     # 若是使用 self-hosted 的 runner，需額外安裝 docker/buildx，請將下面的註解打開
-    # - name: Install Docker buildx
-    #   run: |
-    #     mkdir -p "$HOME/.docker/cli-plugins"
-    #     curl -SsL "https://github.com/docker/buildx/releases/download/v0.7.1/buildx-v0.7.1.linux-amd64" -o "$HOME/.docker/cli-plugins/docker-buildx"
-    #     chmod +x "$HOME/.docker/cli-plugins/docker-buildx"
-    # - name: Set up Docker Buildx
-    #   uses: docker/setup-buildx-action@v1
-    #   with:
-    #     driver: docker
+    - name: Install Docker buildx
+      run: |
+        mkdir -p "$HOME/.docker/cli-plugins"
+        curl -SsL "https://github.com/docker/buildx/releases/download/v0.7.1/buildx-v0.7.1.linux-amd64" -o "$HOME/.docker/cli-plugins/docker-buildx"
+        chmod +x "$HOME/.docker/cli-plugins/docker-buildx"
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v1
+      with:
+        driver: docker
     - name: Build the Docker image
       # secrets.REGISTRY_URL 為映像檔伺服器的 URL
       # vars.APP_NAME 為應用程式的名稱，也就是這個映像檔的名稱
@@ -59,15 +59,15 @@ jobs:
     name: Deploy
     # 必須先執行過 build 動作才可以執行 Deploy 動作
     needs: [ build ]
-    runs-on: ubuntu-latest
+    runs-on: lsgames-frontend-runner
     steps:
       # 若是使用 self-hosted 的 runner，需額外安裝 kubectl，請將下面的註解打開
-      # - name: Install kubectl
-      #   run: |
-      #     curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
-      #     curl -LO "https://dl.k8s.io/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl.sha256"
-      #     echo "$(cat kubectl.sha256)  kubectl" | sha256sum --check
-      #     sudo install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl
+      - name: Install kubectl
+        run: |
+          curl -LO "https://dl.k8s.io/release/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl"
+          curl -LO "https://dl.k8s.io/$(curl -L -s https://dl.k8s.io/release/stable.txt)/bin/linux/amd64/kubectl.sha256"
+          echo "$(cat kubectl.sha256)  kubectl" | sha256sum --check
+          sudo install -o root -g root -m 0755 kubectl /usr/local/bin/kubectl
       - name: Set the Kubernetes context
         uses: azure/k8s-set-context@v3
         with:
@@ -82,6 +82,11 @@ jobs:
       # 這個之前測試沒有成功，如要使用需要先做測試，可以參考 README 中的 Write Secrets to File 連結
       # - name: Get deployment yaml from secret
       #   run: echo "${{ secrets.DEPLOYMENT_MANIFEST }}" | base64 --decode >> ./kubernetes/deployment.yaml
+      # 若是公開的 Repository 但又不想公開私有映像儲存庫的位址時
+      # 請先將該位址以名稱 REGISTRY_URL 儲存於 GitHub 的 secret 中，再將下面三行註解打開
+      - name: Replace registry uri
+        run: |
+          sed -i 's/$secrets.REGISTRY_URL/${{ secrets.REGISTRY_URL }}/g' ./.kubernetes/deployment.yaml
       - name: Deploy to the Kubernetes cluster
         uses: azure/k8s-deploy@v4
         with:
@@ -91,10 +96,10 @@ jobs:
           # 指定要部署的文件名稱與位置
           # 也可以指定資料夾，這個 Action 會把資料夾下的所有 yaml 檔案拿出來部署
           manifests: |
-            kubernetes/deployment.production.yaml
+            .kubernetes/deployment.yaml
           # 要部署的應用程式所在 namespace
           # Service Account 所在的 namespace 也要一樣，否則部署會因權限被拒絕
-          namespace: <NAMESPACE>
+          namespace: smkz-for-work
           # 這邊宣告部署檔中的 image
           # 由於 image 版本是 git commit 的 hash 字串
           # 在這邊宣告完後，這樣這個 Action 就會去找 yaml 中 image 欄位符合 ${{ secrets.REGISTRY_URL }}/${{ vars.APP_NAME }} 者取代其版本的字串

.infrastructures/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  secretKey: "",
+};

.infrastructures/generate-secret-key.sh

@@ -0,0 +1,8 @@
+# Generate secret key here.
+SECRET_KEY=$(echo $(uuidgen | sed 's/[-]//g')$(openssl rand -hex 20) | base64 -w 0)
+
+# Replace to `environment.prod.ts` file which is located the same with this shell script.
+sed -i "s/secretKey: \"\",/secretKey: \"$SECRET_KEY\",/g" "./environment.prod.ts"
+
+# Move this file to correct path.
+mv ./environment.prod.ts ../src/evnironments/environment.ts

.kubernetes/deployment.yaml

@@ -2,23 +2,23 @@
 apiVersion: apps/v1
 kind: Deployment
 metadata:
-  name: <APPLICATION_NAME>
+  name: lsgames-frontend
   labels:
-    app: <APPLICATION_NAME>
-  namespace: <NAMESPACE>
+    app: lsgames-frontend
+  namespace: smkz-for-work
 spec:
   replicas: 1
   selector:
     matchLabels:
-      app: <APPLICATION_NAME>
+      app: lsgames-frontend
   template:
     metadata:
       labels:
-        app: <APPLICATION_NAME>
+        app: lsgames-frontend
     spec:
       containers:
-        - name: <APPLICATION_NAME>
-          image: <REGISTRY_URL>/<IMAGE_NAME>:latest
+        - name: lsgames-frontend
+          image: $secrets.REGISTRY_URL/lsgames-frontend:latest
           resources:
             requests:
               memory: 512Mi
@@ -35,12 +35,12 @@ spec:
 apiVersion: v1
 kind: Service
 metadata:
-  name: <APPLICATION_NAME>
-  namespace: <NAMESPACE>
+  name: lsgames-frontend
+  namespace: smkz-for-work
 spec:
   type: ClusterIP
   selector:
-    app: <APPLICATION_NAME>
+    app: lsgames-frontend
   ports:
     - protocol: TCP
       port: 80

Dockerfile

@@ -9,12 +9,13 @@ RUN npm install -g @angular/cli \
 COPY . .
 COPY src src
 
-RUN ng build -c production --base-href /template/
+RUN chmod +x ./.infrastructures/generate-secret-key.sh && \
+  ng build -c production --base-href /forwork/lsgames/
 
 FROM nginx:alpine
 
-COPY --from=builder /usr/app/dist/frontend /usr/share/nginx/html
-COPY ./nginx-configuration.conf /etc/nginx/conf.d/default.conf
+COPY --from=builder /usr/app/dist/lsgames-frontend /usr/share/nginx/html
+COPY ./.infrastructures/nginx-configuration.conf /etc/nginx/conf.d/default.conf
 
 RUN find /usr/share/nginx/html -type f -exec chmod 644 {} \; \
   && find /usr/share/nginx/html -type d -exec chmod 755 {} \; \

README.md

@@ -31,3 +31,20 @@
 3. 執行指令 `npm i && npm run start`
 
 若系統有安裝 VSCode，也可以直接透過 F5 或偵錯面板啟動前端專案
+
+## 參考資料
+
+- [Base64URL decoding via JavaScript?](https://stackoverflow.com/a/51838635)
+- [how to use async inside html](https://stackoverflow.com/a/71314585)
+- [Infinite loop while use function with http-call in *ngFor with async pipe](https://stackoverflow.com/a/44345900)
+- [CanActivate is deprecated. How to refactor? [duplicate]](https://stackoverflow.com/a/75826784)
+- [How to reject in async/await syntax?](https://stackoverflow.com/a/42453705)
+- [Convert a Unix timestamp to time in JavaScript](https://stackoverflow.com/a/847196)
+- [Creating UUIDs in Bash](https://www.baeldung.com/linux/bash-generate-uuid)
+- [Assigning output of a command to a variable(BASH)](https://stackoverflow.com/a/11527976)
+- [Why does the base64 of a string contain "\n"?](https://superuser.com/a/1225139)
+- [How to Generate Random String in Bash](https://linuxhint.com/generate-random-string-bash/)
+- [How do I use variables in a sed command?](https://askubuntu.com/a/76842)
+- [APP_INITIALIZER](https://angular.io/api/core/APP_INITIALIZER)
+- [How to Load Data Before Your Angular App Starts](https://javascript.plainenglish.io/how-to-load-data-before-your-angular-app-starts-71083cf56132)
+- [Access object key using variable in typescript](https://stackoverflow.com/a/41994659)

angular.json

@@ -46,20 +46,15 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",
                   "maximumWarning": "2kb",
                   "maximumError": "4kb"
                 }
               ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
+              "fileReplacements": [],
               "outputHashing": "all"
             },
             "development": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lsgames-frontend",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/abstracts/http-client.d.ts

@@ -15,4 +15,3 @@ export declare interface CustomerHeaders {
 export declare interface RequestBody {
   [key: string]: any;
 }
-