chore: modified deploy process

.github/workflows/deploy.yml

@@ -0,0 +1,86 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - build/test
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Environment'
+        required: true
+        default: 'test'
+env:
+  NODE_VERSION: "18.16.0"
+  PNPM_VERSION: "8.5.0"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+      - name: setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: ${{ env.PNPM_VERSION }}
+      - name: Node_modules cache
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node-modules-${{ runner.os }}
+      - name: install dependencies
+        run: |
+          pnpm install
+      - name: generate env file (Test)
+        if: github.event.inputs.environment == 'test' || github.ref == 'refs/heads/build/test'
+        run: |
+          echo "NODE_ENV=production" > .env
+          echo "ENVIRONMENT=test" > .env
+          echo "NEXT_PUBLIC_API_KEY=${{ secrets.TEXT_NEXT_PUBLIC_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_GA_MEASUREMENT_ID=${{ secrets.TEXT_NEXT_PUBLIC_GA_MEASUREMENT_ID }}" >> .env
+      - name: generate env file (Prod)
+        if: github.event.inputs.environment == 'prod'
+        run: |
+          echo "NODE_ENV=production" > .env
+          echo "ENVIRONMENT=production" > .env
+          echo "NEXT_PUBLIC_API_KEY=${{ secrets.PROD_NEXT_PUBLIC_API_KEY }}" >> .env
+          echo "NEXT_PUBLIC_GA_MEASUREMENT_ID=${{ secrets.PROD_NEXT_PUBLIC_GA_MEASUREMENT_ID }}" >> .env
+      - name: build
+        run: |
+          pnpm run build
+      - name: Archive build output
+        run: |
+          tar -czf build-output.tar.gz .next .env public Dockerfile start.sh next.config.js env.js node_modules
+
+      - name: Deploy to EC2 (Test)
+        if: github.event.inputs.environment == 'test' || github.ref == 'refs/heads/build/test'
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.TEST_SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc -i"
+          SOURCE: build-output.tar.gz deploy.sh
+          TARGET: /home/${{ secrets.TEST_SSH_USER }}/appflowy.io
+          REMOTE_HOST: ${{ secrets.TEST_SSH_HOST }}
+          REMOTE_USER: ${{ secrets.TEST_SSH_USER }}
+          SCRIPT_AFTER: |
+            cd appflowy.io
+            chmod +x deploy.sh
+            sh deploy.sh
+      - name: Deploy to EC2 (Prod)
+        if: github.event.inputs.environment == 'prod'
+        uses: easingthemes/ssh-deploy@main
+        with:
+          SSH_PRIVATE_KEY: ${{ secrets.PROD_SSH_PRIVATE_KEY }}
+          ARGS: "-rlgoDzvc -i"
+          TARGET: /home/${{ secrets.PROD_SSH_USER }}/appflowy.io
+          SOURCE: build-output.tar.gz deploy.sh
+          REMOTE_HOST: ${{ secrets.PROD_SSH_HOST }}
+          REMOTE_USER: ${{ secrets.PROD_SSH_USER }}
+          SCRIPT_AFTER: |
+            cd appflowy.io
+            chmod +x deploy.sh
+            sh deploy.sh

Dockerfile

@@ -0,0 +1,17 @@
+# Use the official Node.js image as a base image
+FROM node:18
+# Create and change to the app directory
+WORKDIR /app
+
+RUN npm install -g [email protected]
+
+COPY . .
+
+# Expose the port the app runs on
+COPY . /app
+
+RUN chmod +x /app/start.sh
+
+EXPOSE 3000
+
+CMD ["/app/start.sh"]

app/invitation/expired/page.tsx

@@ -4,16 +4,13 @@ import ExpireDescription from '@/components/invitation/expired-description';
 import InviteOwner from '@/components/invitation/invite-owner';
 import InviteWorkspace from '@/components/invitation/invite-workspace';
 import '@/styles/invitation.scss';
-import { Poppins } from 'next/font/google';
 import Image from 'next/image';
 import Link from 'next/link';
 import NextTopLoader from 'nextjs-toploader';
 
-const poppins = Poppins({ subsets: ['latin'], weight: ['400', '500', '600', '700'] });
-
 function Page() {
   return (
-    <div className={`expired-page ${poppins.className}`}>
+    <div className={`expired-page`}>
       <NextTopLoader showSpinner={false} color={'#9327FF'} />
       <div className={'header'}>
         <div className={'logo-wrapper'}>

app/layout.tsx

@@ -1,15 +1,12 @@
 import './globals.scss';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import Favicon from '../public/favicon.ico';
 import OpenGraph from '../public/images/og-image.png';
 import App from '@/components/layout/app';
 import { getModeForServer } from '@/lib/get-theme';
 import { getGitData } from '@/lib/get-git';
 import { getUAFromServer } from '@/lib/get-os';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
   title: 'AppFlowy.IO',
   description: 'AppFlowy is an AI collaborative workspace where you achieve more without losing control of your data',
@@ -44,7 +41,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 
   return (
     <html lang='en' className={mode}>
-      <body id={'body'} className={inter.className}>
+      <body id={'body'}>
         <App ua={ua} gitData={gitData} mode={mode}>
           {children}
         </App>

components/shared/over-title.tsx

@@ -7,12 +7,9 @@ import darkIcon1 from '@/assets/images/download/dark/icon-1.png';
 import darkIcon2 from '@/assets/images/download/dark/icon-2.png';
 import darkIcon3 from '@/assets/images/download/dark/icon-3.png';
 import { downloadPageConfig } from '@/lib/config/pages';
-import { Manrope } from 'next/font/google';
 import { useDarkContext } from '@/lib/hooks/use-dark-context';
 import { motion, useMotionValue, useSpring } from 'framer-motion';
 
-const manrope = Manrope({ subsets: ['latin'] });
-
 function OverTitle({ title }: { title: string }) {
   const dark = useDarkContext();
   const ref = useRef<HTMLDivElement>(null);
@@ -56,7 +53,7 @@ function OverTitle({ title }: { title: string }) {
       const currentScrollTop = document.documentElement.scrollTop;
 
       const scrollDistance = -(currentScrollTop - diff) * delta;
-      
+
       if (Math.abs(scrollDistance) > scrollWidth / 2) {
         return;
       }
@@ -99,9 +96,10 @@ function OverTitle({ title }: { title: string }) {
     <motion.div
       style={{
         x,
+        fontFamily: 'Manrope',
       }}
       ref={ref}
-      className={`translate-z-0 over-title transform ${manrope.className}`}
+      className={`translate-z-0 over-title transform`}
     >
       <div className={`title-text`}>{title}</div>
       <div className={'icons'}>

deploy.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+rm -rf .next .env public start.sh Dockerfile next.config.js env.js node_modules
+
+tar -xzf build-output.tar.gz
+
+rm build-output.tar.gz
+
+docker system prune -f
+
+docker build -t official-website-app .
+
+docker rm -f official-website-app || true
+
+docker run -d --env-file .env -p 3001:3000 --name official-website-app official-website-app

next.config.js

@@ -1,7 +1,13 @@
 const path = require('path');
+
+try {
+  require('./env.js');
+} catch (e) {
+  console.log('Error loading .env file');
+}
+
 const isProd = process.env.NODE_ENV === 'production';
 const environment = process.env.ENVIRONMENT || 'development';
-require('./env');
 const securityHeaders = [
   {
     key: 'X-Frame-Options',
@@ -43,12 +49,13 @@ const rewrites = () => {
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
+
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
 
   // Use the CDN in production and localhost for development.
-  assetPrefix: isProd ? `https://d3uafhn8yrvdfn.cloudfront.net/website/${environment}` : undefined,
+  assetPrefix: 'https://test.appflowy.io',
   rewrites,
   images: {
     remotePatterns: [

package.json

@@ -10,10 +10,7 @@
     "format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\"",
     "format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
     "test": "NODE_ENV=test cypress open",
-    "test:headless": "NODE_ENV=test cypress run --browser chrome",
-    "upload:s3": "node aws-upload.js",
-    "clean:prod": "rm -rf .next && rm -rf node_modules && rm -f app.log",
-    "deploy:prod": "pnpm run clean:prod && pnpm install && pnpm run build && pnpm run upload:s3 && node run-script.js"
+    "test:headless": "NODE_ENV=test cypress run --browser chrome"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.8",
@@ -27,23 +24,23 @@
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
     "prettier": "^2.8.2",
-    "prettier-plugin-tailwindcss": "^0.2.1"
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "@types/node": "20.6.0",
+    "@types/react": "18.2.21",
+    "@types/react-dom": "18.2.7",
+    "aws-sdk": "^2.1462.0",
+    "dotenv": "^16.3.1"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.5",
-    "@types/node": "20.6.0",
-    "@types/react": "18.2.21",
-    "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.14",
-    "aws-sdk": "^2.1462.0",
     "axios": "^1.4.0",
     "axios-cache-interceptor": "^1.3.0",
     "dayjs": "^1.11.9",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
-    "dotenv": "^16.3.1",
     "framer-motion": "^8.4.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",