{"id":17930938,"url":"https://github.com/moshdev2213/gce-cloudcraft","last_synced_at":"2026-05-06T13:05:52.110Z","repository":{"id":258592259,"uuid":"873805646","full_name":"moshdev2213/GCE-CloudCraft","owner":"moshdev2213","description":"The 🌥️ GCE-CloudCraft project deploys a React Vite app on GCP using a VM and Nginx, secured via Ngrok 🔒. It automates CI/CD with GitHub Actions ⚙️, and SSH keys 🔑 are used for secure VM access. ❌❌ Due To credit limitation the below URL resources may not be available ❌❌","archived":false,"fork":false,"pushed_at":"2024-10-17T12:13:58.000Z","size":54,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-03T10:28:31.781Z","etag":null,"topics":["gce","gcp","nginx","ngrok","react","vite"],"latest_commit_sha":null,"homepage":"https://2eae-34-69-4-143.ngrok-free.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moshdev2213.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-16T18:45:33.000Z","updated_at":"2024-10-17T12:17:27.000Z","dependencies_parsed_at":"2024-10-19T18:41:06.217Z","dependency_job_id":null,"html_url":"https://github.com/moshdev2213/GCE-CloudCraft","commit_stats":null,"previous_names":["moshdev2213/gce-cloudcraft"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/moshdev2213/GCE-CloudCraft","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshdev2213%2FGCE-CloudCraft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshdev2213%2FGCE-CloudCraft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshdev2213%2FGCE-CloudCraft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshdev2213%2FGCE-CloudCraft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moshdev2213","download_url":"https://codeload.github.com/moshdev2213/GCE-CloudCraft/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moshdev2213%2FGCE-CloudCraft/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32694988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gce","gcp","nginx","ngrok","react","vite"],"created_at":"2024-10-28T21:18:42.057Z","updated_at":"2026-05-06T13:05:52.093Z","avatar_url":"https://github.com/moshdev2213.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# GCE-CloudCraft 🚀☁\n\n\u003cimg width=\"1722\" alt=\"Frame 2 (1)\" src=\"https://github.com/user-attachments/assets/c0f4a3c7-929f-456c-9c16-d8e6a6c440e9\"\u003e\n\n## 👀 Overview\n\nWelcome to **GCE-CloudCraft**! This project showcases a React Vite application deployed on Google Cloud Platform (GCP) using a Virtual Machine (VM) and an Nginx server. The deployment process ensures security by utilizing Ngrok to expose a dynamic URL, protecting the server's IP from direct public exposure. CI/CD is efficiently managed with GitHub Actions. \n\n## 📸 ScreenShot Of Deployed App\n\n![image](https://github.com/user-attachments/assets/ad576dfd-658d-42fe-ba21-5f314be435de)\n\n\n## 📚 Table of Contents\n\n- [Features](#features)\n- [Prerequisites](#prerequisites)\n- [Setup](#setup)\n- [Deployment](#deployment)\n- [Usage](#usage)\n- [SSH Key Generation](#ssh-key-generation)\n- [CI/CD Configuration](#cicd-configuration)\n\n## 🌟 Features\n\n- 🚀 **Dynamic URL** exposure via Ngrok\n- 🔒 **Secure server** deployment with Nginx\n- 🔄 **CI/CD** using GitHub Actions for seamless updates\n- ⚡ **Optimized build process** with Vite for fast performance\n\n## 🛠️ Prerequisites\n\nMake sure you have the following before getting started:\n\n- A Google Cloud account 💻\n- A Virtual Machine (VM) set up in GCP ☁️\n- Ngrok installed on your VM 📦\n- Node.js (version 20 or higher) installed on your development machine 🌱\n\n## 🚀 Setup\n\n1. **Clone the repository**:\n\n   ```bash\n   git clone https://github.com/yourusername/GCE-CloudCraft.git\n   cd GCE-CloudCraft\n   ```\n\n2. **Install dependencies**:\n\n   ```bash\n   npm install\n   ```\n\n3. **Run the development server locally**:\n\n   ```bash\n   npm run dev\n   ```\n\n## 🌍 Deployment\n\n### Using Ngrok and Nginx\n\n1. **Start Ngrok**: Open a terminal on your GCP VM and run:\n\n   ```bash\n   ngrok http 80\n   ```\n\n   This command provides a public URL that tunnels to your server. 🔗\n\n2. **Configure Nginx**: Ensure that your Nginx is set up to serve your React Vite app from the `/var/www/html/` directory. \n\n3. **Build the Vite React app**:\n\n   ```bash\n   npm run build\n   ```\n\n4. **Copy the build files to the VM**:\n\n   Use the following command to copy your build files to the VM:\n\n   ```bash\n   rsync -avz -e \"ssh -i ~/.ssh/deploy_key -o StrictHostKeyChecking=no\" ./dist/ username@vm_ip:/var/www/html/\n   ```\n\n## 🔑 SSH Key Generation\n\nTo enable secure access to the GCP VM, SSH keys were generated using **MobaXterm**. Here’s how you can generate and set up your SSH keys:\n\n1. **Generate SSH Keys with MobaXterm**:\n   - Open MobaXterm and navigate to the **Tools** menu.\n   - Select **MobaKeyGen (SSH key generator)**.\n   - Click on **Generate** and move your mouse to create randomness.\n   - Once the keys are generated, save the private key to a secure location on your local machine and copy the public key.\n\n2. **Set Up SSH Key in GCP VM Metadata**:\n   - Go to the [Google Cloud Console](https://console.cloud.google.com/).\n   - Navigate to your project and select **Compute Engine** \u003e **VM instances**.\n   - Click on the name of your VM instance to edit it.\n   - Scroll down to the **SSH Keys** section and click **Edit**.\n   - Paste your public key in the provided field. It should look like this:  \n     `your_email@example.com:ssh-rsa AAAAB3...`\n   - Click **Save** to apply the changes.\n\n3. **Add Private Key to GitHub Secrets**:\n   - In your GitHub repository, go to **Settings** \u003e **Secrets and variables** \u003e **Actions**.\n   - Click on **New repository secret**.\n   - Name the secret `GCE_SSH_KEY` and paste your private key into the value field.\n   - Click **Add secret**. \n\nThis setup allows for secure SSH access to your VM without exposing sensitive credentials.\n\n## 🌐 Usage\n\nAfter deployment, access your application through the dynamic Ngrok URL provided. This setup ensures your server's IP is not directly exposed to the public, enhancing security. 🛡️\n\n## 🔧 CI/CD Configuration\n\nThis project utilizes GitHub Actions for CI/CD, allowing automatic deployments upon pushes to the master branch. The workflow manages the checkout, build, and deployment processes seamlessly.\n\n**Steps involved in the GitHub Actions workflow:**\n\n1. Checkout the repository\n2. Set up Node.js environment\n3. Install dependencies and build the Vite React app\n4. Configure SSH key for secure access to the GCP VM\n5. Use rsync to transfer build files to the VM\n6. Execute commands to install and restart Nginx on the VM\n\n\n## GitHub Actions Workflow\n\n### 1. **Workflow Trigger** 🎯\n\nThe workflow is triggered on a push to the `master` branch. This ensures that only code that has been pushed to the main branch will initiate a deployment.\n\n```yaml\non:\n  push:\n    branches:\n      - master\n```\n\n### 2. **Job Definition** 👷‍♂️\n\nThe `deploy` job runs on an `ubuntu-latest` virtual environment. This job includes all the steps necessary for building and deploying the application.\n\n```yaml\njobs:\n  deploy:\n    name: Deploy to GCE\n    runs-on: ubuntu-latest\n```\n\n### 3. **Checkout Code** 📥\n\nThis step checks out the code from the repository so that the workflow has access to it. The `actions/checkout` action is used for this purpose.\n\n```yaml\n- name: Checkout the code\n  uses: actions/checkout@v4\n```\n\n### 4. **Set Up Node.js** ⚙️\n\nHere, we set up the Node.js environment with the specified version (20 in this case). This is crucial for installing dependencies and building the React application.\n\n```yaml\n- name: Set up Node.js\n  uses: actions/setup-node@v4\n  with:\n    node-version: '20'\n```\n\n### 5. **Install Dependencies and Build the Vite React App** 🛠️\n\nThis step installs the required npm dependencies and builds the Vite React application. The build output is typically stored in the `dist` directory.\n\n```yaml\n- name: Install dependencies and build\n  run: |\n    npm install\n    npm run build\n```\n\n### 6. **Set Up SSH Key** 🔑\n\nIn this step, we configure the SSH key for secure access to the GCP VM. The secret keys are stored in GitHub Secrets to protect sensitive information.\n\n```yaml\n- name: Set up SSH key\n  run: |\n    mkdir -p ~/.ssh\n    echo \"${{ secrets.GCE_SSH_KEY }}\" \u003e ~/.ssh/deploy_key\n    chmod 600 ~/.ssh/deploy_key\n    ssh-keyscan -H ${{ secrets.GCE_HOST_IP }} \u003e\u003e ~/.ssh/known_hosts\n```\n\n### 7. **Rsync Files to the GCE Server** 📤\n\nUsing `rsync`, this step transfers the built files from the local `dist` directory to the `/var/www/html/` directory on the GCP VM. This ensures that the latest build is deployed.\n\n```yaml\n- name: Rsync files\n  run: |\n    rsync -avz -e \"ssh -i ~/.ssh/deploy_key -o StrictHostKeyChecking=no\" ./dist/ ${{ secrets.GCE_USERNAME }}@${{ secrets.GCE_HOST_IP }}:/var/www/html/\n```\n\n### 8. **Execute Remote Commands on the GCE Instance** 💻\n\nThis step runs several commands on the GCP VM using SSH to set up Nginx, install it if necessary, and start the service. This ensures that your application is served correctly.\n\n```yaml\n- name: Execute remote ssh commands using ssh key\n  uses: appleboy/ssh-action@v1.1.0\n  with:\n    host: ${{ secrets.GCE_HOST_IP }}\n    username: ${{ secrets.GCE_USERNAME }}\n    key: ${{ secrets.GCE_SSH_KEY }}\n    script: |\n      # Update package index\n      sudo apt-get -y update\n      \n      # Install Nginx\n      sudo apt-get install -y nginx\n      \n      # Start and enable Nginx service\n      sudo systemctl start nginx\n      sudo systemctl enable nginx\n      \n      # Restart Nginx to apply changes\n      sudo systemctl restart nginx\n```\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoshdev2213%2Fgce-cloudcraft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoshdev2213%2Fgce-cloudcraft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoshdev2213%2Fgce-cloudcraft/lists"}