update

O-h-y-o · Jul 5, 2023 · c71cc8b · c71cc8b
1 parent fd2521d
commit c71cc8b
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 3 deletions.
diff --git a/src/.vuepress/navbar/en.ts b/src/.vuepress/navbar/en.ts
@@ -16,6 +16,10 @@ export const enNavbar = navbar([
             text: "Getting Started",
             link: "start-blog",
           },
+          {
+            text: "Google search exposure",
+            link: "search-engine",
+          },
         ],
       },
       {
@@ -66,6 +70,10 @@ export const enNavbar = navbar([
         text: "Info",
         prefix: "info/",
         children: [
+          {
+            text: "AWS S3",
+            link: "aws-s3",
+          },
           {
             text: "Kakao login",
             icon: "kakao",
@@ -76,6 +84,11 @@ export const enNavbar = navbar([
             icon: "kakao",
             link: "naver-easy-login",
           },
+          {
+            text: "Google login",
+            icon: "kakao",
+            link: "google-easy-login",
+          },
         ],
       },
     ],

diff --git a/src/.vuepress/public/_config.yml b/src/.vuepress/public/_config.yml
@@ -1,3 +1,2 @@
-google_site_verification: 5fmAexd12deXwT9mT0H8wh8UqaiTHuAQ5KoubFtQui4
 google_analytics: G-GJVBBPXJ3P
 url: https://o-h-y-o.github.io/
diff --git a/src/ko/posts/info/aws-s3.md b/src/ko/posts/info/aws-s3.md
@@ -44,3 +44,83 @@ github actions를 이용할 것이니 github repository에 프로젝트를 올
 ```
 
 프로젝트 빌드 폴더를 수동적으로 올릴 수 있지만 github actions을 이용해 자동 배포를 해보겠습니다.
+
+먼저 `AWS_ACCESS_KEY_ID` 와 `AWS_SECRET_ACCESS_KEY` 를 <a href="http://us-east-1.console.aws.amazon.com/iamv2/home" target="_blank">IAM</a>에서 발급 받겠습니다.
+
+1. IAM 에서 액세스 관리 => 사용자 => 사용자 추가 버튼을 눌러줍니다.
+
+2. 사용자 이름을 입력하고 다음을 눌러줍니다.
+
+3. 권한 옵션을 직접 정책 연결로 바꾸고 `AmazonS3FullAccess` 를 검색한 뒤 체크해주고 다음을 눌러주고 사용자 생성 버튼을 눌러줍니다.
+
+4. 만들어진 사용자를 클릭하여 들어가 `보안 자격 증명` 탭에서 `액세스 키 만들기` 를 눌러줍니다.
+
+5. 사용 사례는 `로컬 코드` 로 선택하고 다음을 눌러 `액세스 키 만들기` 를 눌러줍니다.
+
+6. `.csv 파일 다운로드`를 하고 액세스 키, `비밀 액세스 키(시크릿 키)`를 잘 저장해둡니다.
+
+7. Github repository 에서 `Settings` 탭을 눌러줍니다.
+
+8. Security => Secrets and variables => Actions 를 눌러 New repository secret 을 눌러줍니다.
+
+9. Name: `AWS_ACCESS_KEY_ID` , Secret: 발급한 `액세스 키` 를 입력하고 생성해줍니다.
+
+10. Name: `AWS_SECRET_ACCESS_KEY` , Secret: 발급한 `비밀 액세스 키(시크릿 키)`를 입력하고 생성해줍니다.
+
+11. github repository 에서 `Actions` 탭을 눌러줍니다.
+
+12. `New workflow` 버튼을 눌러줍니다.
+
+13. `set up a workflow yourself` 를 눌러줍니다.
+
+14. yml 파일명을 자유롭게 지어줍니다.
+
+15. 밑의 코드를 넣어줍니다.
+
+```yml
+name: Vue Build and Deploy to S3
+
+on:
+  push:
+    branches: main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm add @quasar/cli -g && pnpm install
+
+      - name: Build
+        run: pnpm run build:pwa
+
+      - uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          AWS_S3_BUCKET: <Bucket_Name>
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ap-northeast-2
+          SOURCE_DIR: "dist/pwa"
+```
+
+`<Bucket_Name>` 에는 S3버킷의 이름을 넣어줍니다.
+
+해당 포스팅의 과정을 잘 따라왔다면 AWS S3 에 자동적으로 잘 배포가 될 것입니다.
diff --git a/src/ko/posts/vuepress/search-engine.md b/src/ko/posts/vuepress/search-engine.md
@@ -4,7 +4,7 @@
 
 저는 비즈니스 세부정보에서 업종은 `온라인 커뮤니티`, 비즈니스 목표는 `리드 생성`, `사용자 행동 검토` 로 하였습니다. 다른걸로 해도 됩니다.
 
-배포 프로젝트 루트에 `_config.yml` 파일을 만들어주고 밑의 코드를 입력해줍니다.
+배포 프로젝트 루트 혹은 theme를 사용한다면 src/public 폴더에 `_config.yml` 파일을 만들어주고 밑의 코드를 입력해줍니다.
 
 ```yml
 # _config.yml
@@ -20,7 +20,7 @@ url: { 배포URL } # https://username.github.io/
 
 저는 권장 확인 방법으로 하겠습니다. html 파일을 다운로드해서 루트에 넣어줍니다.
 
-그리고 루트폴더에 `sitemap.yml` 파일을 만들어주고 밑의 코드를 그대로 넣어줍니다.
+그리고 루트 폴더 혹은 theme를 사용한다면 src/public 폴더에에 `sitemap.yml` 파일을 만들어주고 밑의 코드를 그대로 넣어줍니다.
 
 ```yml
 ---
@@ -44,3 +44,11 @@ url: { 배포URL } # https://username.github.io/
     {% endfor %}
 </urlset>
 ```
+
+::: tip
+
+vuepress를 사용한다면 <a href="https://plugin-sitemap2.vuejs.press/" target="_blank">vuepress-plugin-sitemap2</a> 를 이용하여 sitemap 자동 생성, 관리를 할 수 있습니다.
+
+:::
+
+이후 google search console => 색인생성 => `Sitemaps` 에서 `https://username.github.io/sitemap.xml` 로 하고 제출해줍니다. 이후 구글 검색에서 자신의 블로그가 잘 노출되는지 확인해봅니다. 노출되기 전까지 시간이 좀 걸릴 수도 있습니다.
diff --git a/src/posts/info/aws-s3.md b/src/posts/info/aws-s3.md
@@ -0,0 +1,126 @@
+# Deploying to AWS S3 (Vue3 + Quasar + pnpm)
+
+We will proceed with the deployment to AWS (Amazon Web Services) Simple Storage Service (S3), a highly scalable and economical cloud storage service.
+
+By building your projects on AWS S3, you can take advantage of the scalability, reliability, and cost-effectiveness of the AWS Cloud.
+
+AWS S3 also makes it easy to serve static websites, simplifying the deployment process and reducing infrastructure complexity.
+
+If you don't have an AWS account, please create one.
+We will be using github actions, so please upload your project to the github repository.
+
+1. Log in to your <a href="https://ap-northeast-2.console.aws.amazon.com/console/home">AWS</a> account.
+
+2. Go to the S3 Dashboard and click the Create Bucket button.
+
+3. Enter the bucket name and `AWS Region` as `Asia Pacific (Seoul) ap-northeast-2`.
+
+4. For object ownership, click `Enable ACL`.
+
+5. Release all public access blocks and click the Create Bucket button.
+
+6. After clicking on the bucket you created, click on the properties tab.
+
+7. Press the Edit button of `Static Website Hosting` at the bottom of the Properties tab to `Enable` it.
+
+8. If you implemented `index.html` for the index document and an error page for the error document, you do not need to enter the corresponding page or index.html or anything else. Save your changes.
+
+9. Go to the Permissions tab and click the 'Edit Bucket Policy' button to paste the text below.
+
+```json
+// Bucket policy to allow public access
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Sid": "PublicReadGetObject",
+      "Effect": "Allow",
+      "Principal": "*",
+      "Action": "s3:GetObject",
+      "Resource": "arn:aws:s3:::nextbit/*"
+    }
+  ]
+}
+```
+
+You can manually upload the project build folder, but let's do an automatic deployment using github actions.
+
+First, get `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` from <a href="http://us-east-1.console.aws.amazon.com/iamv2/home" target="_blank">IAM</a>. It is.
+
+1. In IAM, click Manage Access => Users => Add User button.
+
+2. Enter the user name and click Next.
+
+3. Change the Permissions option to Direct Policy Attachment, search for `AmazonS3FullAccess`, check it, click Next, and click the Create User button.
+
+4. Click on the created user to enter and click on `Create Access Key` on the `Security Credentials` tab.
+
+5. Select `Local Code` as the use case and press `Create Access Key`.
+
+6. Download the `.csv file` and save the access key and `secret access key (secret key)` well.
+
+7. Click the `Settings` tab in the Github repository.
+
+8. Click Security => Secrets and variables => Actions and click New repository secret.
+
+9. Name: `AWS_ACCESS_KEY_ID`, Secret: Enter the issued `Access Key` and create it.
+
+10. Name: `AWS_SECRET_ACCESS_KEY` , Secret: Enter the issued `Secret Access Key (Secret Key)` and create it.
+
+11. Click the `Actions` tab in the github repository.
+
+12. Press the `New workflow` button.
+
+13. Press `set up a workflow yourself`.
+
+14. Name the yml file freely.
+
+15. Enter the code below.
+
+```yml
+name: Vue Build and Deploy to S3
+
+on:
+  push:
+    branches: main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm add @quasar/cli -g && pnpm install
+
+      - name: Build
+        run: pnpm run build:pwa
+
+      - uses: jakejarvis/s3-sync-action@master
+        with:
+          args: --acl public-read --follow-symlinks --delete
+        env:
+          AWS_S3_BUCKET: <Bucket_Name>
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_REGION: ap-northeast-2
+          SOURCE_DIR: "dist/pwa"
+```
+
+Enter the name of your S3 bucket in `<Bucket_Name>`.
+
+If you followed the process of the posting well, it will be automatically deployed to AWS S3.
diff --git a/src/posts/vuepress/search-engine.md b/src/posts/vuepress/search-engine.md
@@ -0,0 +1,54 @@
+# Get exposed in Google search
+
+Create a <a href="https://analytics.google.com/analytics/web/?authuser=0#/provision/SignUp/" target="_blank">Google Analytics</a> account.
+
+In the business details, I set the industry as `Online Community`, business goal as `Lead Generation`, and `User Behavior Review`. You can do it with something else.
+
+If you use a distribution project root or theme, create a `_config.yml` file in the src/public folder and enter the code below.
+
+```yml
+# _config.yml
+google_analytics: { Tracking ID }
+url: { Distribution URL } # https://username.github.io/
+```
+
+Click Get started in <a href="https://search.google.com/search-console/about?hl=en&utm_source=wmx&utm_medium=wmx-welcome" target="_blank">Google Search Console</a> .
+
+Select `URL Prefix` and enter `https://username.github.io/`.
+
+Confirm ownership by choosing the recommended verification method or 4 other verification methods.
+
+I will do the recommended verification method. Download the html file and put it in the root.
+
+And if you use the root folder or theme, create a `sitemap.yml` file in the src/public folder and put the code below as it is.
+
+```yml
+---
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    {% for post in site.posts %}
+    <url>
+        <loc>{{ site.url }}{{ post.url | remove: 'index.html' }}</loc>
+    </url>
+    {% endfor %}
+
+    {% for page in site.pages %}
+    {% if page.layout != nil %}
+    {% if page.layout != 'feed' %}
+    <url>
+        <loc>{{ site.url }}{{ page.url | remove: 'index.html' }}</loc>
+    </url>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+</urlset>
+```
+
+::: tip
+
+If you use vuepress, you can use <a href="https://plugin-sitemap2.vuejs.press/" target="_blank">vuepress-plugin-sitemap2</a> to automatically create and manage sitemaps.
+
+:::
+
+After that, google search console => Index creation => Go to `https://username.github.io/sitemap.xml` in `Sitemaps` and submit. After that, check if your blog is showing up well in Google search. It may take some time before exposure.