Merge pull request #15 from janakhpon/updates/2021-12-29/newarticle

updates: added an article about EC2 pipeline

README.md

@@ -35,3 +35,11 @@ A collection of mono repos from my personal blog posts.
 [React Query](https://janakhpon.gitlab.io/posts/react-query)
 
 [Next Translate](https://janakhpon.gitlab.io/posts/next-translate)
+
+[Postgresql on AWS](https://janakhpon.gitlab.io/posts/setup-postgresql-aws-rds)
+
+[Passwordless ssh login](https://janakhpon.gitlab.io/posts/setup-passwordless-ssh)
+
+[Posgresql on VPS](https://janakhpon.gitlab.io/posts/setup-postgresql-vps)
+
+[Basic CICD on EC2](https://janakhpon.gitlab.io/posts/setup-basic-cicd-ec2)

next-seo-pwa-cicd/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

next-seo-pwa-cicd/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

next-seo-pwa-cicd/.gitlab-ci.yml

@@ -0,0 +1,35 @@
+image: node:14
+
+stages:
+  - build
+  - deploy
+
+build_develop:
+  stage: build
+  artifacts:
+    paths:
+      - build/
+    expire_in: 1 week
+  cache:
+    paths:
+      - node_modules/
+  only:
+    - develop
+  before_script:
+    - npm install
+  script:
+    - npm run build
+
+deploy_develop:
+  stage: deploy
+  only:
+    - develop
+  before_script:
+    - eval $(ssh-agent -s)
+    - mkdir -p ~/.ssh
+    - touch ~/.ssh/config
+    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
+    - ssh-add <(echo "$SSH_PRIVATE_KEY")
+  script:
+    - scp -P22 -r ./* "$INSTANCE_ADDR":/home/ubuntu/develop/web/
+    - ssh -o StrictHostKeyChecking=no "$INSTANCE_ADDR" "cd develop/web && pwd && bash scripts/install_and_reload.sh"

next-seo-pwa-cicd/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

next-seo-pwa-cicd/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next-seo-pwa-cicd/next.config.js

@@ -0,0 +1,12 @@
+const withPWA = require('next-pwa')
+
+module.exports = withPWA({
+  pwa: {
+    dest: 'public',
+    // disable: process.env.NODE_ENV === 'development',
+    // register: true,
+    // scope: '/app',
+    // sw: 'service-worker.js',
+    //...
+  }
+})

next-seo-pwa-cicd/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "next-seo-pwa-cicd",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build:local": "next build",
+    "build": "next build && next export -o build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "11.1.0",
+    "next-pwa": "^5.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.19",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.0",
+    "typescript": "4.3.5"
+  }
+}

next-seo-pwa-cicd/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

next-seo-pwa-cicd/public/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "PWA",
+  "short_name": "PWA",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "#FFFFFF",
+  "background_color": "#FFFFFF",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+  }
+  ]
+}

next-seo-pwa-cicd/scripts/install_and_reload.sh

@@ -0,0 +1 @@
+/home/ubuntu/.nvm/versions/node/v14.17.2/bin/pm2 stop develop_web && /home/ubuntu/.nvm/versions/node/v14.17.2/bin/pm2 delete develop_web && /home/ubuntu/.nvm/versions/node/v14.17.2/bin/pm2 serve build 3000 --name develop_web

next-seo-pwa-cicd/src/pages/_app.tsx

@@ -0,0 +1,19 @@
+import '../../styles/globals.css'
+import type { AppProps } from 'next/app'
+import Head from "next/head";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <Head>
+        <title>PWA 🔥 </title>
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  )
+}
+export default MyApp

next-seo-pwa-cicd/src/pages/_document.tsx

@@ -0,0 +1,101 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import React from "react";
+
+const url = `http://localhost:3000/`;
+const description = `HaHa | HeHe`
+const name = "HaHa"
+const social_image = "mstile-150x150.png"
+
+export default class extends Document {
+  static async getInitialProps(ctx: any) {
+    return await Document.getInitialProps(ctx);
+  }
+
+  render() {
+    return (
+      <Html lang="en" dir="ltr">
+        <Head>
+
+          {/* HERE I AM 👇*/}
+          <meta name='application-name' content='PWA App' />
+          <meta name='apple-mobile-web-app-capable' content='yes' />
+          <meta name='apple-mobile-web-app-status-bar-style' content='default' />
+          <meta name='apple-mobile-web-app-title' content='PWA App' />
+          <meta name='description' content='Best PWA App in the world' />
+          <meta name='format-detection' content='telephone=no' />
+          <meta name='mobile-web-app-capable' content='yes' />
+          <meta name='msapplication-config' content='/icons/browserconfig.xml' />
+          <meta name='msapplication-TileColor' content='#2B5797' />
+          <meta name='msapplication-tap-highlight' content='no' />
+          <meta name='theme-color' content='#000000' />
+
+
+          <meta
+            name="keywords"
+            content="Hello, hola, blah blah"
+          />
+          <meta name="author" content="Ja Nakh Pon" />
+          <meta name="robots" content="index,follow" />
+          <meta name="googlebot" content="index,follow" />
+          <meta name="description" content={description} />
+          <meta name="theme-color" content="#006ABC" />
+
+          {/* openGraph */}
+          <meta property="og:title" content={name} />
+          <meta
+            property="og:description"
+            content={description}
+          />
+          <meta property="og:type" content={"website"} />
+          <meta property="og:url" content={url} />
+          <meta property="og:locale" content="en_IE" />
+          <meta property="og:site_name" content={name} />
+          <meta property="og:image" content={social_image} />
+
+          {/* Twitter */}
+          <meta name="twitter:site" content={`@ja_nakh`} />
+          <meta name="twitter:creator" content={`@ja_nakh`} />
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:title" content={name} />
+          <meta
+            name="twitter:description"
+            content={description}
+          />
+          <meta name="twitter:image" content={social_image} />
+
+
+          <link rel="canonical" href={url} />
+          <link rel="icon" href="/favicon.ico" />
+          <link
+            rel="apple-touch-icon"
+            sizes="180x180"
+            href="/apple-touch-icon.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="/favicon-32x32.png"
+          />
+          <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="/favicon-16x16.png"
+          />
+
+          {/* AND HERE 👇*/}
+          <link rel="manifest" href="/manifest.json" />
+          <link rel="shortcut icon" href="/favicon.ico" />
+          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+          <meta name="msapplication-TileColor" content="#da532c" />
+          <meta name="theme-color" content="#006ABC" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}

next-seo-pwa-cicd/src/pages/_offline.tsx

@@ -0,0 +1,11 @@
+import Head from "next/head";
+
+const Offline = () => (
+  <>
+    <Head>
+      <title>PWA</title>
+    </Head>
+    <h1>Oops! you are offline!</h1>
+  </>
+);
+export default Offline;