Merge pull request #608 from sparcs-kaist/#592.2-nginxdockerfile-with…

…-invite #592.2 Nginx 컨테이너에서 `/invite` 페이지는 별도 파일 응답
sparcs-kaist · Aug 19, 2023 · cdc6e59 · cdc6e59
2 parents 9bfe161 + ff3703e
commit cdc6e59
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 51 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,22 +1,34 @@
-FROM node:16-alpine
+FROM nginx:1.24.0
+WORKDIR /root
+
+# Install curl & node & npm (from nvm)
+ENV NODE_VERSION v16.15.0
+RUN apt-get -qq update; \
+    apt-get -qq install curl; \
+    curl https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash; \
+    . /root/.nvm/nvm.sh; \
+    nvm install $NODE_VERSION; \
+    nvm alias default $NODE_VERSION; \
+    nvm use --delete-prefix default
+ENV PATH /root/.nvm/versions/node/$NODE_VERSION/bin:$PATH
 
 # Copy repository
-WORKDIR /usr/src/app
 COPY . .
 
-# Install curl (for taxi-docker)
-RUN apk update && apk add curl
-
-RUN npm install --global [email protected] [email protected]
-
 # Install requirements
-RUN pnpm install && \
+RUN npm install --global [email protected] [email protected]; \
+    pnpm install; \
     pnpm install [email protected] --save
-# build
-RUN pnpm run build
 
-# serve
+# Build
+RUN pnpm run build; \
+    chmod 711 /root
+
+# Set default environment variables
+ENV REACT_APP_BACK_URL=https://taxi.sparcs.org/api \
+    REACT_APP_FRONT_URL=https://taxi.sparcs.org \
+    REACT_APP_OG_URL=https://og-image.taxi.sparcs.org
+
+# Serve with injected environment variables
 EXPOSE 80
-CMD ["sh", "-c", "npx react-inject-env set && serve -s build -l 80"]
-# EXPOSE 8080
-# ENTRYPOINT npx react-inject-env set && npx http-server build
+CMD ["sh", "-c", "envsubst '$$REACT_APP_FRONT_URL $$REACT_APP_OG_URL' < serve/default.conf > /etc/nginx/conf.d/default.conf && npx react-inject-env set && nginx -g 'daemon off;'"]
diff --git a/public/index.html b/public/index.html
@@ -15,14 +15,10 @@
     />
 
     <!-- Icon -->
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" sizes="any" />
-    <link rel="icon" href="%PUBLIC_URL%/icon.svg" type="image/svg+xml" />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="%PUBLIC_URL%/apple-touch-icon.png"
-    />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
 
     <!-- Web App Setting -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -34,14 +30,18 @@
     <!-- <link rel="apple-touch-startup-image" href="/startup.png" /> -->
 
     <!-- Open Graph : Web -->
-    <meta property="og:url" content="%PUBLIC_URL%" />
+    <meta property="og:url" content="%FRONT_URL%" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Taxi" />
     <meta
       property="og:description"
       content="KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스"
     />
-    <meta property="og:image" content="%PUBLIC_URL%/graph.png" />
+    <meta property="og:image" content="%FRONT_URL%/graph.png" />
+    <meta
+      property="og:image:alt"
+      content="KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스"
+    />
     <meta property="og:locale" content="ko_KR" />
     <meta property="og:locale:alternate" content="en_US" />
     <!-- TODO : Open Graph : iOS -->

diff --git a/serve/default.conf b/serve/default.conf
@@ -0,0 +1,23 @@
+server {
+    listen 80;
+    listen [::]:80;
+
+    location ~ ^/invite/(?<room_id>[^/]+) {
+        root  /root/serve;
+        try_files /invite.html =404;
+
+        sub_filter '%ROOM_ID%' $room_id;
+        sub_filter '%FRONT_URL%' '${REACT_APP_FRONT_URL}';
+        sub_filter '%OG_URL%' '${REACT_APP_OG_URL}';
+        sub_filter_once off;
+    }
+
+    location / {
+        root   /root/build;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+
+        sub_filter '%FRONT_URL%' '${REACT_APP_FRONT_URL}';
+        sub_filter_once off;
+    }
+}
diff --git a/serve/invite.html b/serve/invite.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"
+    />
+
+    <!-- Name & Description -->
+    <title>Taxi 공유하기 링크</title>
+    <meta name="apple-mobile-web-app-title" content="Taxi" />
+    <meta
+      name="description"
+      content="KAIST 구성원들의 택시 동승 인원 모집을 위한 서비스"
+    />
+
+    <!-- Icon -->
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Web App Setting -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="app-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+
+    <!-- Open Graph : Web -->
+    <meta property="og:url" content="%FRONT_URL%/invite/%ROOM_ID%" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Taxi 공유하기 링크" />
+    <meta
+      property="og:description"
+      content="링크로 이동하여 택시에 동승하세요!"
+    />
+    <meta property="og:image" content="%OG_URL%/%ROOM_ID%.png" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:locale:alternate" content="en_US" />
+
+    <!-- Script -->
+    <script src="/env.js"></script>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const firebaseConfig =
+          window["env"]?.REACT_APP_FIREBASE_CONFIG &&
+          JSON.parse(window["env"].REACT_APP_FIREBASE_CONFIG);
+        const redirectPath = window.location.pathname.replace(
+          "/invite",
+          "/home"
+        );
+        const getDynamicLink = (to, fallback = true) => {
+          const { host, androidPacakgeName, iosAppBundleId, appStoreId } =
+            firebaseConfig?.dynamicLink || {};
+          const { origin } = window.location;
+
+          if (!host) return `${origin}${to}`;
+          const encodedLink = origin + encodeURIComponent(to);
+
+          return fallback
+            ? `${host}?link=${encodedLink}&apn=${androidPacakgeName}&afl=${encodedLink}&ibi=${iosAppBundleId}&ifl=${encodedLink}&efr=1`
+            : `${host}?link=${encodedLink}&apn=${androidPacakgeName}&ibi=${iosAppBundleId}&isi=${appStoreId}&efr=1`;
+        };
+        window.location.href = getDynamicLink(rediretPath);
+      });
+    </script>
+  </head>
+  <style>
+    html {
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #faf8fb;
+    }
+    body {
+      color: #6e3678;
+      font-size: 16px;
+    }
+    body:after {
+      content: "Loading 🚕";
+      animation: loading 1.5s linear infinite;
+    }
+    @keyframes loading {
+      25% {
+        content: "Loading. 🚕";
+      }
+      50% {
+        content: "Loading.. 🚕";
+      }
+      75% {
+        content: "Loading... 🚕";
+      }
+    }
+  </style>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/components/Skeleton/Routes.tsx b/src/components/Skeleton/Routes.tsx
@@ -18,11 +18,6 @@ const routeProps = [
     component: lazy(() => import("pages/Home/RedirectToHome")),
     exact: true,
   },
-  {
-    path: "/invite/:roomId",
-    component: lazy(() => import("pages/Invite")),
-    exact: true,
-  },
   {
     path: ["/home", "/home/:roomId"],
     component: lazy(() => import("pages/Home")),

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
@@ -61,7 +61,7 @@ const Skeleton = ({ children }: SkeletonProps) => {
   const isLoading = userId === null;
   const isDisplayNavigation = useMemo(
     () =>
-      !["/login", "/logout", "/chatting", "/invite"].some((prefix) =>
+      !["/login", "/logout", "/chatting"].some((prefix) =>
         pathname.startsWith(prefix)
       ),
     [pathname]

diff --git a/src/pages/Invite/index.tsx b/src/pages/Invite/index.tsx
diff --git a/src/tools/trans.js b/src/tools/trans.js
@@ -4,7 +4,7 @@ const getS3Url = (x) => `${s3BaseUrl}${x}`;
 
 const getDynamicLink = (to, fallback = true) => {
   const { host, androidPacakgeName, iosAppBundleId, appStoreId } =
-    firebaseConfig?.dinamicLink || {};
+    firebaseConfig?.dynamicLink || {};
   const { origin } = window.location;
 
   if (!host) return `${origin}${to}`;

diff --git a/src/types/env.d.ts b/src/types/env.d.ts
@@ -18,7 +18,7 @@ export type FirebaseConfig = {
   messagingSenderId: string;
   appId: string;
   measurementId: string;
-  dinamicLink: {
+  dynamicLink: {
     host: string;
     androidPacakgeName: string;
     iosAppBundleId: string;