Merge pull request #68 from esc-chula/fix/fix-runtime-env

fix runtime env web
esc-chula · Nov 1, 2024 · 4f9070a · 4f9070a
2 parents 055783d + 2da1665
commit 4f9070a
Show file tree

Hide file tree

Showing 14 changed files with 207 additions and 119 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -5,4 +5,5 @@ dist
 .gitignore
 docker-compose.yml
 **/.next
-**/.env
+**/.env
+**/.env.local
diff --git a/.env.example b/.env.example
@@ -4,4 +4,6 @@ INTANIA_AUTH_APP_ID=
 INTANIA_AUTH_SECRET=
 INTANIA_AUTH_REDIRECT_URL=
 
-JWT_SECRET=
+JWT_SECRET=
+
+NEXT_PUBLIC_NODE_ENV=
diff --git a/.github/workflows/build-web.yaml b/.github/workflows/build-web.yaml
@@ -10,10 +10,6 @@ on:
 
 env:
   IMAGE_NAME: ${{ github.repository }}-web
-  #NEXT_PUBLIC_API_SERVER_URL: ${{ secrets.NEXT_PUBLIC_API_SERVER_URL }}
-  #INTANIA_AUTH_APP_ID: ${{ secrets.INTANIA_AUTH_APP_ID }}
-  #INTANIA_AUTH_REDIRECT_URL: ${{ secrets.INTANIA_AUTH_REDIRECT_URL }}
-  #JWT_SECRET: ${{ secrets.JWT_SECRET }}
 
 jobs:
   build:
@@ -56,11 +52,6 @@ jobs:
           echo "tags = $RESULT"
           echo "tags=$RESULT" >> "$GITHUB_OUTPUT"
 
-      #- name: Create env File
-      #  run: |
-      #    touch .env
-      #    echo NEXT_PUBLIC_API_SERVER_URL=${{ secrets.NEXT_PUBLIC_API_SERVER_URL }} >> .env
-
       - name: Build Docker image with multiple tags
         run: |
           tags="${{ steps.tags.outputs.tags }}"

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -42,6 +42,7 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.45",
     "next": "^14.2.1",
+    "next-runtime-env": "^3.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.5",

diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,47 +1,48 @@
-import "../styles/globals.css";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
+import '../styles/globals.css';
+import { Inter } from 'next/font/google';
+import localFont from 'next/font/local';
+import { PublicEnvScript } from 'next-runtime-env';
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ['latin'] });
 const sukhumvitSet = localFont({
   src: [
     {
-      path: "../../public/fonts/SukhumvitSet-Bold.ttf",
-      weight: "700",
-      style: "normal",
+      path: '../../public/fonts/SukhumvitSet-Bold.ttf',
+      weight: '700',
+      style: 'normal',
     },
     {
-      path: "../../public/fonts/SukhumvitSet-SemiBold.ttf",
-      weight: "600",
-      style: "normal",
+      path: '../../public/fonts/SukhumvitSet-SemiBold.ttf',
+      weight: '600',
+      style: 'normal',
     },
     {
-      path: "../../public/fonts/SukhumvitSet-Medium.ttf",
-      weight: "500",
-      style: "normal",
+      path: '../../public/fonts/SukhumvitSet-Medium.ttf',
+      weight: '500',
+      style: 'normal',
     },
     {
-      path: "../../public/fonts/SukhumvitSet-Text.ttf",
-      weight: "400",
-      style: "normal",
+      path: '../../public/fonts/SukhumvitSet-Text.ttf',
+      weight: '400',
+      style: 'normal',
     },
     {
-      path: "../../public/fonts/SukhumvitSet-Light.ttf",
-      weight: "300",
-      style: "normal",
+      path: '../../public/fonts/SukhumvitSet-Light.ttf',
+      weight: '300',
+      style: 'normal',
     },
     {
-      path: "../../public/fonts/SukhumvitSet-Thin.ttf",
-      weight: "100",
-      style: "normal",
+      path: '../../public/fonts/SukhumvitSet-Thin.ttf',
+      weight: '100',
+      style: 'normal',
     },
   ],
-  variable: "--sukhumvit-set-font",
+  variable: '--sukhumvit-set-font',
 });
 
 export const metadata = {
-  title: "ESC Project Tracker",
-  description: "ESC Project Tracker",
+  title: 'ESC Project Tracker',
+  description: 'ESC Project Tracker',
 };
 
 export default function RootLayout({
@@ -53,8 +54,9 @@ export default function RootLayout({
     <html lang="en">
       <head>
         <link rel="icon" type="x-icon" href="/icons/esc.svg" />
+        <PublicEnvScript />
       </head>
-      <body className={inter.className + " " + sukhumvitSet.className}>
+      <body className={inter.className + ' ' + sukhumvitSet.className}>
         {children}
       </body>
     </html>

diff --git a/apps/web/src/app/login/route.ts b/apps/web/src/app/login/route.ts
@@ -1,8 +1,8 @@
-import { env } from '@/src/env';
+import { env } from 'next-runtime-env';
 import { redirect } from 'next/navigation';
 
 export async function GET() {
   redirect(
-    `https://account.intania.org/?appId=${env.INTANIA_AUTH_APP_ID}&callbackUrl=${env.INTANIA_AUTH_REDIRECT_URL}`,
+    `https://account.intania.org/?appId=${env('INTANIA_AUTH_APP_ID')}&callbackUrl=${env('INTANIA_AUTH_REDIRECT_URL')}`,
   );
 }
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -2,15 +2,9 @@ import OnboardingPageHeader from '@/src/components/header/OnboardingPageHeader';
 import { Button } from '@/src/components/ui/button';
 import Image from 'next/image';
 import Link from 'next/link';
-import { env } from '../env';
+import { env } from 'next-runtime-env';
 
 export default function Page() {
-  console.log(
-    'test',
-    env.NEXT_PUBLIC_API_SERVER_URL,
-    env.INTANIA_AUTH_REDIRECT_URL,
-  );
-
   return (
     <>
       <main className="flex flex-col items-center">
@@ -29,12 +23,6 @@ export default function Page() {
             ครบจบทุกกระบวนการ มาเริ่มต้นเอกสารกัน !
           </h2>
         </div>
-        <p>
-          debugs: {env.NEXT_PUBLIC_API_SERVER_URL}{' '}
-          {process.env.NEXT_PUBLIC_API_SERVER_URL}{' '}
-          {process.env.INTANIA_AUTH_REDIRECT_URL}{' '}
-          {env.INTANIA_AUTH_REDIRECT_URL}
-        </p>
         <Button
           className="rounded-[80px] bg-gradient-red text-2xl font-bold px-12 py-[10px] h-16"
           asChild

diff --git a/apps/web/src/app/trpc.ts b/apps/web/src/app/trpc.ts
@@ -1,16 +1,16 @@
 import { createTRPCProxyClient, httpBatchLink, loggerLink } from '@trpc/client';
 import type { AppRouter } from '../../../api/src/trpc/trpc.router';
-import { env } from '../env';
+import { env } from 'next-runtime-env';
 
 export const trpc = createTRPCProxyClient<AppRouter>({
   links: [
     loggerLink({
       enabled: (opts) =>
-        (env.NODE_ENV === 'development' && typeof window !== 'undefined') ||
+        (env('NEXT_PUBLIC_NODE_ENV') === 'development' && typeof window !== 'undefined') ||
         (opts.direction === 'down' && opts.result instanceof Error),
     }),
     httpBatchLink({
-      url: `${env.NEXT_PUBLIC_API_SERVER_URL}/trpc`,
+      url: `${env('NEXT_PUBLIC_API_SERVER_URL')}/trpc`,
       fetch(url, options) {
         return fetch(url, {
           ...options,

diff --git a/apps/web/src/env.ts b/apps/web/src/env.ts
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
@@ -3,7 +3,7 @@ import { jwtVerify } from 'jose';
 import { trpc } from './app/trpc';
 import { parseJwt } from './service/auth';
 import { Payload } from './interface/auth';
-import { env } from './env';
+import { env } from 'next-runtime-env';
 
 function redirect(req: NextRequest, payload: Payload): NextResponse {
   const path = req.nextUrl.pathname;
@@ -19,7 +19,7 @@ export async function middleware(req: NextRequest) {
   if (accessToken) {
     const verifyResult = await jwtVerify(
       accessToken,
-      new TextEncoder().encode(env.JWT_SECRET),
+      new TextEncoder().encode(env('JWT_SECRET')),
     ).catch(() => null);
     const verifiedPayload = verifyResult?.payload as Payload | undefined;
     // console.log(

diff --git a/apps/web/src/service/auth.ts b/apps/web/src/service/auth.ts
@@ -4,7 +4,6 @@ import { cookies } from 'next/headers';
 import { trpc } from '../app/trpc';
 import type { Payload, Tokens } from '../interface/auth';
 import { authErrors } from '../errors/auth';
-import { env } from '../env';
 
 export async function getCookies(): Promise<Tokens> {
   try {
@@ -28,20 +27,20 @@ export async function getCookies(): Promise<Tokens> {
 }
 
 export async function signIn(token: string): Promise<Tokens> {
-  console.log(
+/*   console.log(
     'Nextjs server-side, Signing in with token:',
     JSON.stringify({ token }),
     'destination:',
-    env.NEXT_PUBLIC_API_SERVER_URL,
+    env('NEXT_PUBLIC_API_SERVER_URL'),
     'auth/signin',
-  );
+  ); */
 
   // const data = await trpc.authRouter.signin.mutate({ token }).catch((err) => {
   //   console.error('Nextjs server-side, signIn err:', err);
   //   throw new Error(authErrors.signInError);
   // });
   const response = await fetch(
-    `${env.NEXT_PUBLIC_API_SERVER_URL}/auth/signin`,
+    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/auth/signin`,
     {
       method: 'POST',
       headers: {

diff --git a/apps/web/src/service/aws/uploadFileToS3.ts b/apps/web/src/service/aws/uploadFileToS3.ts
@@ -1,4 +1,4 @@
-import { env } from '@/src/env';
+import { env } from 'next-runtime-env';
 import { getCookies } from '../auth';
 
 interface UploadResponse {
@@ -19,7 +19,7 @@ export default async function uploadFileToS3(obj: {
     formData.append('fileName', obj.file.name);
     const cookies = await getCookies();
     const response = await fetch(
-      `${env.NEXT_PUBLIC_API_SERVER_URL}/aws/upload`,
+      `${env('NEXT_PUBLIC_API_SERVER_URL')}/aws/upload`,
       {
         method: 'POST',
         body: formData,