오픈그래프 이미지, 헤더 로고 url 변경 / 배포 페이즈 별 환경 변수 설정 (#61)

* fix: og:image url

* fix: header logo href

* 하는 김에 deploy 동시성 설정

* 배포 페이즈 별 환경 변수 설정

.env.development

@@ -0,0 +1 @@
+BASE_URL=https://dev.wafflestudio.com

.env.production

@@ -0,0 +1 @@
+BASE_URL=https://wafflestudio.com

.github/workflows/deploy-dev.yml

@@ -4,6 +4,10 @@ on:
     branches:
       - main
 
+concurrency:
+  group: deploy-dev
+  cancel-in-progress: true
+
 jobs:
   Deploy:
     runs-on: ubuntu-latest
@@ -22,7 +26,7 @@ jobs:
         run: yarn
 
       - name: Build
-        run: yarn build
+        run: yarn build:dev
 
       - name: Upload to S3
         uses: jakejarvis/s3-sync-action@master

.github/workflows/deploy-prod.yml

@@ -4,6 +4,10 @@ on:
     tags:
       - "v[0-9]+.[0-9]+.[0-9]+*"
 
+concurrency:
+  group: deploy-prod
+  cancel-in-progress: true
+
 jobs:
   Deploy:
     runs-on: ubuntu-latest
@@ -22,7 +26,7 @@ jobs:
         run: yarn
 
       - name: Build
-        run: yarn build
+        run: yarn build:prod
 
       - name: Upload to S3
         uses: jakejarvis/s3-sync-action@master

app/layout.tsx

@@ -4,6 +4,8 @@ import "../styles/globals.css";
 import "../styles/font.scss";
 import Header from "../components/common/Header/Header";
 
+const baseUrl = process.env.BASE_URL || "https://wafflestudio.com";
+
 export const metadata: Metadata = {
   title: "WaffleStudio",
   description: "맛있는 서비스가 탄생하는 곳 와플스튜디오",
@@ -14,13 +16,13 @@ export const metadata: Metadata = {
   openGraph: {
     type: "website",
     locale: "ko_KR",
-    url: "https://wafflestudio.com",
+    url: baseUrl,
     title: "와플스튜디오",
     siteName: "wafflestudio.com",
     description: "맛있는 서비스가 탄생하는 곳 와플스튜디오",
     images: [
       {
-        url: "/wafflestudio_text_logo.svg",
+        url: `${baseUrl}/wafflestudio_text_logo.png`,
         alt: "WaffleStudio",
       },
     ],

components/common/Header/Header.tsx

@@ -23,15 +23,13 @@ export default function Header() {
   return (
     <header className={cx("header")}>
       <nav className={cx("content")}>
-        {/*TODO: 개발/배포 주소 환경변수로 뺄까? */}
-        <a className={cx("logo")} href="https://dev.wafflestudio.com/">
+        <a className={cx("logo")} href="/">
           <img
             src="/static/images/logo/waffle_logo_title.png"
             alt="Wafflestudio logo image"
           />
         </a>
         <ul className={cx("tabNavigator")}>
-          {/*TODO: 라우팅 확정되면 newHome 바꾸기 */}
           {tabs.map(({ name, pathname }) => (
             <li
               key={pathname}

package.json

@@ -5,6 +5,8 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "build:dev": "env-cmd -f .env.development next build",
+    "build:prod": "env-cmd -f .env.production next build",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix"
@@ -40,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^5.54.0",
     "@typescript-eslint/parser": "^5.52.0",
     "babel-loader": "^8.3.0",
+    "env-cmd": "^10.1.0",
     "eslint": "8.25.0",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "^8.5.0",

yarn.lock

@@ -4945,7 +4945,7 @@ commander@^2.19.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^4.1.1:
+commander@^4.0.0, commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
@@ -5739,6 +5739,14 @@ entities@^4.4.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+env-cmd@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/env-cmd/-/env-cmd-10.1.0.tgz#c7f5d3b550c9519f137fdac4dd8fb6866a8c8c4b"
+  integrity sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==
+  dependencies:
+    commander "^4.0.0"
+    cross-spawn "^7.0.0"
+
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"