<h2>Prerequisites</h2><ul><li>LightSail server up and running.</li><li>Project on GitHub (in this tutorial I’m using the Next js application).</li><li>Server SSH private key (the key you create while creating a new instance).</li></ul><h2>Step 1 - Create GitHub Action secrets</h2><p>We need 3 Action secrets <code>AWS_USERNAME</code> <code>AWS_HOSTNAME</code> <code>AWS_PRIVATE_KEY</code></p><ul><li>Navigate to the main page of the repository.</li><li>Click on Setting Tab (top right area).</li><li>Select Action under “Secrets”</li><li>Click on the “New repository secret” button (top right area)</li><li>Set Name to “<code>AWS_PRIVATE_KEY</code>".</li><li>Paste the content of the server SSH private key remove <code>----BEGIN RSA PRIVATE KEY---—</code> and <code>----END RSA PRIVATE KEY---—</code></li><li>Click on “Add secret”</li><li>follow the above point to add further “action secrets”</li><li>Set <code>AWS_USERNAME</code> value to your Linux users (most commonly centos, apache2) you can use <code>whoami</code> command to get your current user name.</li><li>Set <code>AWS_HOSTNAME</code> value to your server IP address.</li></ul><blockquote><p>Note : You can also add any ENV variable as Action secrets by following same guide above.</p></blockquote><h2>Step 2 - Setup Workflows</h2><p>This is the part where all magic happens</p><ul><li>Create folders in your project repository <code>my-cool-app/.github/workflows</code></li><li>Set up your workflow by creating two <code>.yml</code> files. For the sake of simplicity, we named it <code>build.yml</code> and <code>deploy.yml</code>.&nbsp;</li></ul><p><i><u>#build.yml</u></i></p><pre><code class="language-yml">name: build

on:
    push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build
      env:
        NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}
</code></pre><p>Add env variable under <code>env:</code> if any.</p><p><i><u>#deploy.yml</u></i></p><pre><code class="language-yml">name: deploy

on:
  push:
    branches:
      - main
  workflow_dispatch:  

jobs:
  deploy:
  	needs: [build]  # require build to pass before deploy runs
    name: Deploy
    runs-on: ubuntu-latest
    environment: production

    steps:
    - name: Checkout
      uses: actions/checkout@v2

    - name: SSH to Host
      env:
        AWS_PRIVATE_KEY: ${{ secrets.AWS_PRIVATE_KEY  }}
        AWS_HOSTNAME: ${{ secrets.AWS_HOSTNAME }}
        AWS_USERNAME : ${{ secrets.AWS_USERNAME  }}

      run: |
          echo "$AWS_PRIVATE_KEY" &gt; private_key &amp;&amp; chmod 600 private_key
          ssh -o StrictHostKeyChecking=no -i private_key ${AWS_USERNAME}@${AWS_HOSTNAME} '

            # 📌 Start your instance/server related tasks form here.
            # 1
            cat whereami.txt
            # 2
            bash ~/scripts/my-app-deploy.sh
          '
</code></pre><p>#1</p><p>Tip: Create <code>whereami.txt</code> file on your server to test out the connection.</p><p>#2</p><p>You can run your <code>.sh</code> file stored on your LightSail server, the script will contain all the required commands to build and start your application.</p><p><i><u>#my-app-deploy.sh</u></i></p><pre><code class="language-bash">pm2 stop my-app

git pull

npm install

npm run build

pm2 start my-app

echo "my-app-deploy script executed"
</code></pre><h3><strong>WTH is pm2?</strong></h3><p>it is a production process manager for Node.js applications with a built-in load balancer.</p><p>For More info Check out our guide <a href="https://devsolo.in/posts/how-to-deploy-next-js-application-on-linux-server"><strong>How To Deploy Next js application on linux server</strong></a></p>

AWS LightSail CI / CD

<p><strong>// Newbie</strong></p><p>#PostController.php</p><pre><code class="language-php">class PostController extends Controller
{
    ...
    public function index()
    {
    	if(auth()-&gt;user()-&gt;role == 'superadmin'){
    		$posts = Post::all();
    	}else{
    		$posts = Post::where('author_id', auth()-&gt;id())
    	}
    	
        return view('posts.index', [
        'posts' =&gt; $posts
        ]);
    }
    ...
}</code></pre><p>&nbsp;</p><p><strong>// Experienced</strong></p><p>#User.php</p><pre><code class="language-php">class User extends Authenticatable
{
	...
	public const ROLE_SUPERADMIN = 'superadmin';
	...
}</code></pre><p>#PostController.php</p><pre><code class="language-php">class PostController extends Controller
{
    ...
    public function index()
    {
    	if(auth()-&gt;user()-&gt;role == User::ROLE_SUPERADMIN){
    		$posts = Post::all();
    	}else{
    		$posts = Post::where('author_id', auth()-&gt;id())
    	}
    	
        return view('posts.index', [
        'posts' =&gt; $posts
        ]);
    }
    ...
}</code></pre><p>We replaced <code>superadmin</code> with <code>User::ROLE_SUPERADMIN</code> and set its value in User Model</p><p>You can use model const in blade view as well</p><p>#index.blade.php</p><pre><code class="language-php">@if (auth()-&gt;user()-&gt;role == \App\Models\User::ROLE_SUPERADMIN)
	I am superadmin! 😎
@else
	I am normal user! 🤠
@endif</code></pre><p>&nbsp;</p>

Laravel Model Const

<blockquote><p>There is no Number 1 🥇, Make your Own research and try to find the perfect system for your next project</p></blockquote><h3>1: Firebase Authentication</h3><p>You can use Firebase Authentication to allow users to sign in to your app using one or more sign-in methods, including email address and password sign-in, and federated identity providers such as Google Sign-in and Facebook Login.</p><p><a href="https://firebase.google.com/docs/auth/web/start">source</a></p><h3>2: Auth0</h3><p>Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications.</p><p><a href="https://auth0.com/docs/get-started/auth0-overview">source</a></p><h3>3: SuperTokens</h3><p>it is an Open-Source auth provider Add <strong>secure login and session management</strong> to your apps. <a href="https://supertokens.com/docs/community/sdks">SDKs available</a> for popular languages and front-end frameworks e.g. Node.js, Go, Python, React.js, React Native, Vanilla JS, etc.</p><p><a href="https://github.com/supertokens/supertokens-core">source</a></p><h3>4: NextAuth.js</h3><p>NextAuth.js is a complete open-source authentication solution for <a href="http://nextjs.org/">Next.js</a> applications.</p><p><a href="https://github.com/nextauthjs/next-auth">source</a></p><h3>5: Breeze &amp; Next.js&nbsp;</h3><p>Laravel Breeze can also scaffold an authentication API that is ready to authenticate modern JavaScript applications.</p><p><a href="https://laravel.com/docs/9.x/starter-kits#breeze-and-next">source</a></p>

Next js Authentication

<h3>Step 1 - Generate favicons</h3><p>You can use “https://www.favicon-generator.org” to generate different sizes of favicon.</p><h3>Step 2 - Create SEO component</h3><pre><code class="language-javascript">import React from "react";
    import Head from "next/head";
    export default function Seo({
    
      title = "your site title",
      description = "your site description",
      url = "https://example.com",
      image = "/images/favicons/android-icon-192x192.png",
      keywords = "tag1, tag2, tag3",
    }) {
      return (
        &lt;Head&gt;
          {/* Global Title */}
          &lt;title&gt;
            {title ?? process.env.NEXT_PUBLIC_APP_NAME ?? "Next js App"}
          &lt;/title&gt;
          {/* URL's */}
          &lt;link rel="canonical" href={url} /&gt;
          {/* &lt;!-- Primary Meta Tags --&gt; */}
          &lt;meta charSet="UTF-8"&gt;&lt;/meta&gt;
          &lt;meta name="title" content={title} /&gt;
          &lt;meta name="description" content={description} /&gt;
          &lt;meta name="keywords" content={keywords}&gt;&lt;/meta&gt;
          {/* &lt;!-- Open Graph / Facebook --&gt; */}
          &lt;meta property="og:type" content="website" /&gt;
          &lt;meta property="og:url" content={url} /&gt;
          &lt;meta property="og:title" content={title} /&gt;
          &lt;meta property="og:description" content={description} /&gt;
          &lt;meta property="og:image" content={image} /&gt;
          {/* &lt;!-- Twitter --&gt; */}
          &lt;meta property="twitter:card" content="summary_large_image" /&gt;
          &lt;meta property="twitter:url" content={url} /&gt;
          &lt;meta property="twitter:title" content={title} /&gt;
          &lt;meta property="twitter:description" content={description} /&gt;
          &lt;meta property="twitter:image" content={image} /&gt;
          {/*  Favicons  */}
          &lt;link
            rel="apple-touch-icon"
            sizes="57x57"
            href="/images/favicons/apple-icon-57x57.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="60x60"
            href="/images/favicons/apple-icon-60x60.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="72x72"
            href="/images/favicons/apple-icon-72x72.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="76x76"
            href="/images/favicons/apple-icon-76x76.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="114x114"
            href="/images/favicons/apple-icon-114x114.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="120x120"
            href="/images/favicons/apple-icon-120x120.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="144x144"
            href="/images/favicons/apple-icon-144x144.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="152x152"
            href="/images/favicons/apple-icon-152x152.png"
          /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/images/favicons/apple-icon-180x180.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="192x192"
            href="/images/favicons/android-icon-192x192.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/images/favicons/favicon-32x32.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="96x96"
            href="/images/favicons/favicon-96x96.png"
          /&gt;
          &lt;link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/images/favicons/favicon-16x16.png"
          /&gt;
          &lt;link rel="manifest" href="/images/favicons/manifest.json" /&gt;
          &lt;meta name="msapplication-TileColor" content="#ffffff" /&gt;
          &lt;meta
            name="msapplication-TileImage"
            content="/images/favicons/ms-icon-144x144.png"
          /&gt;
          &lt;meta name="theme-color" content="#ffffff"&gt;&lt;/meta&gt;
        &lt;/Head&gt;
      );
    }</code></pre><h3>Step 1 - Usage</h3><p><code>pages/index.jsx</code></p><pre><code class="language-javascript">return (
	...
		{/* SEO Component*/}
		&lt;Seo /&gt;
		{/* /SEO Component*/}
	...
)</code></pre><p><code>pages/posts/index.jsx</code></p><pre><code class="language-javascript">return (
	...
		{/* SEO Component*/}
		&lt;Seo title={"MySite | Posts"} url={'https://example.com/posts'} /&gt;
		{/* /SEO Component*/}
	...
)</code></pre><p><code>pages/posts/[slug].jsx</code></p><pre><code class="language-javascript">return (
	...
		{/* SEO Component*/}
		&lt;Seo
        	title={post.title}
        	description={post.excerpt}
        	url={'https://example.com/posts/'+post.slug}
      	/&gt;
		{/* /SEO Component*/}
	...
)</code></pre><p>&nbsp;</p>

Based on Self-learning and experiments

AWS LightSail CI / CD

Laravel Model Const

Next js Authentication

Next js SEO component

Join Our Newsletter