sshdeploymentenvironment-variablesgithub-actionscicd

How do I access .env variables after deploying my website using Github Actions?


This is my github actions yml file. After completion, the /build folder of my github repository is deployed to my linux server. But after that, my react website can't access the .env variable. When I look at the console in Chrome browser, I see that process.env.REACT_APP_API_URL is undefined. What's the problem? How can I fix the error?

name: Build & Deploy production server

on:
  pull_request:
    branches: 
      - main
    types: [closed]

jobs:
  build-deploy:
    name: Build & Deploy production server
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18.x'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run build
        run: npm run build --if-present
    
      - name: Deploy on production server
        uses: easingthemes/ssh-deploy@main
        with:
            SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
            ARGS: "-rlgoDzvc -i --delete"
            SOURCE: "build/"
            REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
            REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
            REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
            TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
            EXCLUDE: "/dist/, /node_modules/"

I have over 10+ variables in .env file.


Solution

  • Oh, I found the solution and it works very well now. Let me provide my solution. Thanks all.

    name: Build & Deploy on production server
    
    on:
      pull_request:
        branches: 
          - main
        types: [closed]
    
    env:
      REACT_APP_API_URL: ${{ vars.PRO_REACT_APP_API_URL }}
      REACT_APP_PUBLIC_NFT_STORAGE_API_KEY: ${{ vars.REACT_APP_PUBLIC_NFT_STORAGE_API_KEY }}
      REACT_APP_STRIPE_PRO_PRODUCT_ID: ${{ vars.REACT_APP_STRIPE_PRO_PRODUCT_ID }}
      REACT_APP_STRIPE_PRO_TRIAL_ID: ${{ vars.REACT_APP_STRIPE_PRO_TRIAL_ID }}
      REACT_APP_STRIPE_PUBLIC_KEY: ${{ vars.REACT_APP_STRIPE_PUBLIC_KEY }}
      REACT_APP_STRIPE_ESSENTIAL_ID: ${{ vars.REACT_APP_STRIPE_ESSENTIAL_ID }}
      REACT_APP_STRIPE_PRO_LITE_ID: ${{ vars.REACT_APP_STRIPE_PRO_LITE_ID }}
      REACT_APP_STRIPE_PRO_ID: ${{ vars.REACT_APP_STRIPE_PRO_ID }}
      REACT_APP_GIPHY_SDK_API_KEY: ${{ vars.REACT_APP_GIPHY_SDK_API_KEY }}
      REACT_APP_TINYMCE_API_KEY: ${{ vars.REACT_APP_TINYMCE_API_KEY }}
      REACT_APP_ENOKI_API_KEY: ${{ vars.REACT_APP_ENOKI_API_KEY }}
      REACT_APP_GOOGLE_CLIENT_ID: ${{ vars.REACT_APP_GOOGLE_CLIENT_ID }}
      REACT_APP_SUI_NETWORK: ${{ vars.REACT_APP_SUI_NETWORK }}
      REACT_APP_SUI_PACKAGE_ID: ${{ vars.REACT_APP_SUI_PACKAGE_ID }}
      REACT_APP_SUI_SETTING_ID: ${{ vars.REACT_APP_SUI_SETTING_ID }}
      REACT_APP_ADMIN: ${{ vars.REACT_APP_ADMIN }}
    
    jobs:
      build-deploy:
        name: Build & Deploy Gallerai on production server
        runs-on: ubuntu-latest
        steps:
          - name: Checkout code
            uses: actions/checkout@v4
    
          - name: Setup Node.js
            uses: actions/setup-node@v4
            with:
              node-version: '18.x'
    
          - name: Install dependencies
            run: yarn install --frozen-lockfile
    
          - name: Run build
            run: npm run build --if-present
        
          - name: Deploy on production server
            uses: easingthemes/ssh-deploy@main
            with:
                SSH_PRIVATE_KEY: ${{ secrets.PRO_SSH_PRIVATE_KEY }}
                ARGS: "-rlgoDzvc -i --delete"
                SOURCE: "build/"
                REMOTE_HOST: ${{ secrets.PRO_REMOTE_HOST }}
                REMOTE_USER: ${{ secrets.PRO_REMOTE_USER }}
                REMOTE_PORT: ${{ secrets.PRO_REMOTE_PORT }}
                TARGET: ${{ secrets.PRO_REMOTE_TARGET }}
                EXCLUDE: "/dist/, /node_modules/"
    

    I used env context and defined all variables in Settings/Secrets and Variables.