From 433df8279856d86599dc8fab8c73dbe8c94778c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDiga=20Kokelj?= Date: Mon, 13 May 2024 11:36:54 +0200 Subject: [PATCH 1/3] Gateway frontend Dockerfile added --- tools/walletextension/frontend/Dockerfile | 18 ++++++++++++++++++ tools/walletextension/frontend/next.config.js | 5 ----- 2 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 tools/walletextension/frontend/Dockerfile diff --git a/tools/walletextension/frontend/Dockerfile b/tools/walletextension/frontend/Dockerfile new file mode 100644 index 0000000000..2c906ee1a4 --- /dev/null +++ b/tools/walletextension/frontend/Dockerfile @@ -0,0 +1,18 @@ +# Use an official Node.js 22 as a parent image +FROM node:22-alpine + +WORKDIR /usr/src/app + +# ARG for build-time variable (GATEWAY_API_URL) +ARG GATEWAY_API_URL + +# ENV for URL to be used in the app +ENV NEXT_PUBLIC_API_GATEWAY_URL=${GATEWAY_API_URL} + +# Copy package.json and package-lock.json (or yarn.lock) into the container +COPY package*.json ./ + +RUN npm install +COPY . . +RUN npm run build +CMD ["npm", "start"] \ No newline at end of file diff --git a/tools/walletextension/frontend/next.config.js b/tools/walletextension/frontend/next.config.js index 04472f7ff7..50f8420725 100644 --- a/tools/walletextension/frontend/next.config.js +++ b/tools/walletextension/frontend/next.config.js @@ -1,14 +1,9 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, - output: "export", - // distDir should be "../api/static" in production but .next in development - distDir: process.env.NODE_ENV === "development" ? ".next" : "../api/static", images: { unoptimized: true, }, - // base path for static files should be "" in development but "/static" in production - basePath: process.env.NODE_ENV === "development" ? "" : "/static", }; module.exports = nextConfig; From e011c4db3c462a37fc6ea042852fcde1deef5f57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDiga=20Kokelj?= Date: Mon, 13 May 2024 13:33:30 +0200 Subject: [PATCH 2/3] github action workflow added for Ten gateway frontend --- .../manual-deploy-ten-gateway-frontend.yml | 79 +++++++++++++++++++ tools/walletextension/frontend/Dockerfile | 2 + 2 files changed, 81 insertions(+) create mode 100644 .github/workflows/manual-deploy-ten-gateway-frontend.yml diff --git a/.github/workflows/manual-deploy-ten-gateway-frontend.yml b/.github/workflows/manual-deploy-ten-gateway-frontend.yml new file mode 100644 index 0000000000..16545153ef --- /dev/null +++ b/.github/workflows/manual-deploy-ten-gateway-frontend.yml @@ -0,0 +1,79 @@ +# Deploys Ten Gateway Frontend on Azure for Testnet +# Builds the Ten Gateway image, pushes the image to dockerhub and starts the Ten Gateway on Azure VM + +name: '[M] Deploy Ten Gateway Frontend' +run-name: '[M] Deploy Ten Gateway Frontend ( ${{ github.event.inputs.testnet_type }} )' +on: + workflow_dispatch: + inputs: + testnet_type: + description: 'Testnet Type' + required: true + default: 'dev-testnet' + type: choice + options: + - 'dev-testnet' + - 'uat-testnet' + - 'sepolia-testnet' + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + environment: + name: ${{ github.event.inputs.testnet_type }} + strategy: + fail-fast: false + matrix: + include: + - testnet_type: 'dev-testnet' + GATEWAY_API_URL: 'https://dev-testnet.ten.xyz' + - testnet_type: 'uat-testnet' + GATEWAY_API_URL: 'https://uat-testnet.ten.xyz' + - testnet_type: 'sepolia-testnet' + GATEWAY_API_URL: 'https://testnet.ten.xyz' + steps: + - name: 'Print GitHub variables' + run: | + echo "Selected Testnet Type: ${{ matrix.testnet_type }}" + echo "Gateway API URL: ${{ matrix.GATEWAY_API_URL }}" + + - uses: actions/checkout@v3 + + - name: 'Extract branch name' + shell: bash + run: | + echo "Branch Name: ${GITHUB_REF_NAME}" + echo "BRANCH_NAME=${GITHUB_REF_NAME}" >> $GITHUB_ENV + + - name: 'Set up Docker' + uses: docker/setup-buildx-action@v1 + + - name: 'Login to Azure docker registry' + uses: azure/docker-login@v1 + with: + login-server: testnetobscuronet.azurecr.io + username: testnetobscuronet + password: ${{ secrets.REGISTRY_PASSWORD }} + + - name: 'Login via Azure CLI' + uses: azure/login@v1 + with: + creds: ${{ secrets.AZURE_CREDENTIALS }} + + - name: Build and Push Docker Image + run: | + DOCKER_BUILDKIT=1 docker build --build-arg GATEWAY_API_URL=${{ matrix.GATEWAY_API_URL }} -t ${{ vars.DOCKER_BUILD_TAG_GATEWAY_FE }} -f ./tools/walletextension/frontend/Dockerfile . + docker push ${{ vars.DOCKER_BUILD_TAG_GATEWAY_FE }} + + - name: "Deploy Gateway FE to Azure Container Instances" + uses: "azure/aci-deploy@v1" + with: + resource-group: ${{ secrets.RESOURCE_GROUP }} + dns-name-label: ${{ github.event.inputs.testnet_type }}-ten-gateway + image: ${{ vars.DOCKER_BUILD_TAG_GATEWAY_FE }} + name: ${{ github.event.inputs.testnet_type }}-fe-ten-gateway + location: "uksouth" + restart-policy: "Never" + ports: "80" + cpu: 2 + memory: 2 diff --git a/tools/walletextension/frontend/Dockerfile b/tools/walletextension/frontend/Dockerfile index 2c906ee1a4..9d8fb79971 100644 --- a/tools/walletextension/frontend/Dockerfile +++ b/tools/walletextension/frontend/Dockerfile @@ -8,6 +8,7 @@ ARG GATEWAY_API_URL # ENV for URL to be used in the app ENV NEXT_PUBLIC_API_GATEWAY_URL=${GATEWAY_API_URL} +ENV PORT=80 # Copy package.json and package-lock.json (or yarn.lock) into the container COPY package*.json ./ @@ -15,4 +16,5 @@ COPY package*.json ./ RUN npm install COPY . . RUN npm run build +EXPOSE 80 CMD ["npm", "start"] \ No newline at end of file From 7d4c7381133eff2fa05b51ce3000b672103408d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDiga=20Kokelj?= Date: Mon, 13 May 2024 15:44:03 +0200 Subject: [PATCH 3/3] revert the changes for next.config.js to avoid issues with the next release --- tools/walletextension/frontend/next.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tools/walletextension/frontend/next.config.js b/tools/walletextension/frontend/next.config.js index 50f8420725..04472f7ff7 100644 --- a/tools/walletextension/frontend/next.config.js +++ b/tools/walletextension/frontend/next.config.js @@ -1,9 +1,14 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, + output: "export", + // distDir should be "../api/static" in production but .next in development + distDir: process.env.NODE_ENV === "development" ? ".next" : "../api/static", images: { unoptimized: true, }, + // base path for static files should be "" in development but "/static" in production + basePath: process.env.NODE_ENV === "development" ? "" : "/static", }; module.exports = nextConfig;