Add deploy (#367)

* Clean up server from old logic * Typo * Clean up scripts for future ssdeploy CLI * Dockernize application * Add ssdeploy * Fix CI * Fix regions on preview * Try to fix region build * Fix client dependencies * Fix imports * Add deploy script * Typo * Simplify API url
browserslist · Aug 13, 2022 · 31e1efe · 31e1efe
1 parent d84f65b
commit 31e1efe
Show file tree

Hide file tree

Showing 16 changed files with 372 additions and 81 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,12 @@
+node_modules/
+
+server/test/
+client/
+!client/dist/
+
+.*
+README.md
+LICENSE
+nano-staged.json
+simple-git-hooks.json
+Dockerfile
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,165 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+env:
+  FORCE_COLOR: 2
+jobs:
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Install asdf
+        uses: asdf-vm/actions/setup@v1
+      - name: Cache asdf
+        id: asdf-cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.asdf
+          key: asdf-${{ hashFiles('**/.tool-versions') }}
+      - name: Install asdf tools
+        if: steps.asdf-cache.outputs.cache-hit != 'true'
+        uses: asdf-vm/actions/install@v1
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.local/share/pnpm/
+          key: pnpm-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --ignore-scripts
+      - name: Build regions
+        run: pnpm -r build:regions
+      - name: Run tests
+        run: pnpm test
+
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Notify about new deployment
+        uses: bobheadxi/deployments@v1
+        id: deployment
+        with:
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: production
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Install asdf
+        uses: asdf-vm/actions/setup@v1
+      - name: Cache asdf
+        id: asdf-cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.asdf
+          key: asdf-${{ hashFiles('**/.tool-versions') }}
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.local/share/pnpm/
+          key: pnpm-production-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install production dependencies
+        run: pnpm install --prod --frozen-lockfile --ignore-scripts
+      - name: Build regions
+        run: pnpm -r build:regions
+      - name: Build static files
+        run: pnpm build
+      - name: Auth Google Cloud
+        uses: google-github-actions/auth@v0
+        with:
+          credentials_json: ${{ secrets.GCLOUD_AUTH }}
+      - name: Install Google Cloud
+        uses: google-github-actions/setup-gcloud@v0
+      - name: Deploy files
+        id: deploy
+        run: ./node_modules/.bin/ssdeploy deploy --verbose
+        env:
+          GCLOUD_APP: ${{ secrets.GCLOUD_APP }}
+          GCLOUD_PROJECT: ${{ secrets.GCLOUD_PROJECT }}
+          CLOUDFLARE_ZONE: ${{ secrets.CLOUDFLARE_ZONE }}
+          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
+      - name: Update deployment status
+        uses: bobheadxi/deployments@v1
+        if: always()
+        with:
+          step: finish
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          env: ${{ steps.deployment.outputs.env }}
+          env_url: ${{ steps.deploy.outputs.url }}
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+
+  preview:
+    name: Preview
+    runs-on: ubuntu-latest
+    if: github.ref != 'refs/heads/main'
+    steps:
+      - name: Notify about new deployment
+        uses: bobheadxi/deployments@v1
+        id: deployment
+        with:
+          step: start
+          token: ${{ secrets.GITHUB_TOKEN }}
+          ref: ${{ github.head_ref }}
+          env: preview-${{ github.event.number }}
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Install asdf
+        uses: asdf-vm/actions/setup@v1
+      - name: Cache asdf
+        id: asdf-cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.asdf
+          key: asdf-${{ hashFiles('**/.tool-versions') }}
+      - name: Install asdf tools
+        if: steps.asdf-cache.outputs.cache-hit != 'true'
+        uses: asdf-vm/actions/install@v1
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.local/share/pnpm/
+          key: pnpm-production-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install production dependencies
+        run: pnpm install --prod --frozen-lockfile --ignore-scripts
+      - name: Build regions
+        run: pnpm -r build:regions
+      - name: Build static files
+        run: pnpm build
+      - name: Auth Google Cloud
+        uses: google-github-actions/auth@v0
+        with:
+          credentials_json: ${{ secrets.GCLOUD_AUTH }}
+      - name: Install Google Cloud
+        uses: google-github-actions/setup-gcloud@v0
+      - name: Deploy files
+        id: deploy
+        run: ./node_modules/.bin/ssdeploy preview $PR --verbose
+        env:
+          PR: ${{ github.event.number }}
+          GCLOUD_APP: ${{ secrets.GCLOUD_APP }}
+          GCLOUD_PROJECT: ${{ secrets.GCLOUD_PROJECT }}
+          CLOUDFLARE_ZONE: ${{ secrets.CLOUDFLARE_ZONE }}
+          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
+      - name: Update deployment status
+        uses: bobheadxi/deployments@v1
+        if: always()
+        with:
+          step: finish
+          token: ${{ secrets.GITHUB_TOKEN }}
+          status: ${{ job.status }}
+          env: ${{ steps.deployment.outputs.env }}
+          env_url: ${{ steps.deploy.outputs.url }}
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
diff --git a/.github/workflows/close.yml b/.github/workflows/close.yml
@@ -0,0 +1,50 @@
+name: Clean Preview
+on:
+  pull_request:
+    types: [ closed ]
+jobs:
+  close:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clean from GitHub
+        uses: bobheadxi/deployments@v1
+        with:
+          step: delete-env
+          token: ${{ secrets.GITHUB_TOKEN }}
+          env: preview-${{ github.event.number }}
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Install asdf
+        uses: asdf-vm/actions/setup@v1
+      - name: Cache asdf
+        id: asdf-cache
+        uses: actions/cache@v3
+        with:
+          path: ~/.asdf
+          key: asdf-${{ hashFiles('**/.tool-versions') }}
+      - name: Install asdf tools
+        if: steps.asdf-cache.outputs.cache-hit != 'true'
+        uses: asdf-vm/actions/install@v1
+      - name: Cache pnpm modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-pnpm-modules
+        with:
+          path: ~/.local/share/pnpm/
+          key: pnpm-production-${{ hashFiles('pnpm-lock.yaml') }}
+      - name: Install dependencies
+        run: pnpm install --prod --frozen-lockfile --ignore-scripts
+      - name: Auth Google Cloud
+        uses: google-github-actions/auth@v0
+        with:
+          credentials_json: ${{ secrets.GCLOUD_AUTH }}
+      - name: Install Google Cloud
+        uses: google-github-actions/setup-gcloud@v0
+      - name: Clean from Google Cloud
+        run: ./node_modules/.bin/ssdeploy close $PR --verbose
+        env:
+          PR: ${{ github.event.number }}
+          GCLOUD_APP: ${{ secrets.GCLOUD_APP }}
+          GCLOUD_PROJECT: ${{ secrets.GCLOUD_PROJECT }}
+          CLOUDFLARE_ZONE: ${{ secrets.CLOUDFLARE_ZONE }}
+          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,16 @@
+FROM node:18-alpine
+
+ENV NODE_ENV production
+WORKDIR /var/www
+COPY --chown=node:node . /var/www
+
+RUN corepack enable
+RUN corepack prepare [email protected] --activate
+COPY ./pnpm-workspace.yaml /var/www/
+COPY ./package.json /var/www/
+COPY ./pnpm-lock.yaml /var/www/
+COPY ./server/ /var/www/server/
+RUN pnpm install --filter ./server --prod --frozen-lockfile --ignore-scripts
+COPY ./client/dist/ /var/www/client/dist/
+
+CMD "node" "server/index.js"
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ the compatible browsers for a browsers query.
 
 
 ## Development
-Can I Use
+
 To run a local copy for development:
 
 1. Install correct versions of Node.js and pnpm. There are two ways:
@@ -36,8 +36,8 @@ To run a local copy for development:
       ```
 
    -  Server production mode
-      ```
-      pnpm production
+      ```sh
+      pnpm ssdeploy run
       ```
 
 We recommend to install Prettier and EditorConfig plugins to your text editor.
diff --git a/client/package.json b/client/package.json
@@ -12,17 +12,17 @@
   "dependencies": {
     "@csstools/postcss-oklab-function": "^1.1.1",
     "autoprefixer": "^10.4.8",
+    "caniuse-lite": "^1.0.30001375",
     "jstransformer-markdown-it": "^3.0.0",
     "postcss": "^8.4.16",
     "postcss-media-minmax": "^5.0.0",
     "postcss-nesting": "^10.1.10",
     "postcss-opacity-percentage": "^1.1.2",
-    "vite": "^3.0.6",
+    "vite": "^3.0.7",
     "vite-plugin-pug-transformer": "^1.0.2"
   },
   "devDependencies": {
     "@size-limit/file": "^8.0.1",
-    "caniuse-lite": "^1.0.30001375",
     "size-limit": "^8.0.1"
   },
   "engines": {

diff --git a/client/scripts/build-regions.js b/client/scripts/build-regions.js
@@ -1,7 +1,7 @@
-import fs from 'fs'
+import { writeFileSync, readdirSync } from 'node:fs'
 
 const DATA_REGION_FILE = 'data/regions.json'
-const REGIONS_LIST_PATH = 'node_modules/caniuse-lite/data/regions'
+const REGIONS_LIST_PATH = './node_modules/caniuse-lite/data/regions'
 
 const regions = {
   continents: {
@@ -17,15 +17,13 @@ const regions = {
   countryCodes: getCaniuseCountries()
 }
 
-fs.writeFileSync(DATA_REGION_FILE, JSON.stringify(regions))
+writeFileSync(DATA_REGION_FILE, JSON.stringify(regions))
 process.stdout.write(
   `A file "client/${DATA_REGION_FILE}" with regions has been created\n`
 )
 
 function getCaniuseCountries() {
-  let regionCodes = fs
-    .readdirSync(REGIONS_LIST_PATH)
-    .map(file => file.split('.js')[0])
+  let regionCodes = readdirSync(REGIONS_LIST_PATH).map(f => f.split('.js')[0])
 
   return regionCodes
     .filter(regionCode => {

diff --git a/client/view/Form/form.js b/client/view/Form/form.js
@@ -7,8 +7,6 @@ import {
   showStats
 } from '../BrowserStats/browserStats.js'
 
-const API_HOST = 'http://localhost:5000/api/'
-
 const form = document.querySelector('[data-id=query_form]')
 const textarea = document.querySelector('[data-id=query_text_area]')
 const regionCoverage = document.querySelector('[data-id=region_coverage]')
@@ -134,8 +132,7 @@ async function updateStatsView(query, region) {
   try {
     form.classList.add('Form--loaded')
     let urlParams = new URLSearchParams({ q: query, region })
-    let url = new URL(`browsers?${urlParams}`, `${API_HOST}`)
-    response = await fetch(url)
+    response = await fetch(`/api/browsers?${urlParams}`)
   } catch (error) {
     renderError(`Network error. Check that you are online.`)
     form.classList.remove('Form--loaded')

diff --git a/package.json b/package.json
@@ -9,10 +9,13 @@
   },
   "scripts": {
     "start": "pnpm -r start",
-    "production": "pnpm -r build && NODE_ENV=production pnpm -r serve",
+    "build": "pnpm -r build",
     "lint": "eslint . && stylelint **/*.css",
     "test": "pnpm audit --prod && pnpm lint && pnpm -r test"
   },
+  "dependencies": {
+    "ssdeploy": "^0.9.1"
+  },
   "devDependencies": {
     "@logux/eslint-config": "^47.2.0",
     "@logux/stylelint-config": "^0.10.1",