From 2230ad7dccbee0990b3763a0cda84334ed8c4d78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=BDiga=20Kokelj?= Date: Wed, 21 Aug 2024 09:11:24 +0200 Subject: [PATCH] deploy frontend separately --- .../manual-deploy-ten-gateway-frontend.yml | 17 ++----- tools/walletextension/frontend/Dockerfile | 47 ++++++++++++++----- tools/walletextension/frontend/next.config.js | 5 -- .../src/components/layouts/header.tsx | 4 +- .../frontend/src/pages/_app.tsx | 10 ++-- 5 files changed, 44 insertions(+), 39 deletions(-) diff --git a/.github/workflows/manual-deploy-ten-gateway-frontend.yml b/.github/workflows/manual-deploy-ten-gateway-frontend.yml index 8ac6e17e70..b50d0f1506 100644 --- a/.github/workflows/manual-deploy-ten-gateway-frontend.yml +++ b/.github/workflows/manual-deploy-ten-gateway-frontend.yml @@ -15,27 +15,16 @@ on: - '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 }}" + echo "Gateway API URL: ${{ vars.GATEWAY_URL }}" - uses: actions/checkout@v4 @@ -46,7 +35,7 @@ jobs: echo "BRANCH_NAME=${GITHUB_REF_NAME}" >> $GITHUB_ENV - name: 'Set up Docker' - uses: docker/setup-buildx-action@v1 + uses: docker/setup-buildx-action@v3.6.1 - name: 'Login to Azure docker registry' uses: azure/docker-login@v1 @@ -62,7 +51,7 @@ jobs: - 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_BUILDKIT=1 docker build --build-arg GATEWAY_API_URL=${{ vars.GATEWAY_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" diff --git a/tools/walletextension/frontend/Dockerfile b/tools/walletextension/frontend/Dockerfile index 9d8fb79971..600dbdf617 100644 --- a/tools/walletextension/frontend/Dockerfile +++ b/tools/walletextension/frontend/Dockerfile @@ -1,20 +1,41 @@ -# Use an official Node.js 22 as a parent image -FROM node:22-alpine +# Use an official Node.js LTS version as a base image +FROM node:20-alpine AS base -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} -ENV PORT=80 -# Copy package.json and package-lock.json (or yarn.lock) into the container -COPY package*.json ./ +# Set the working directory +WORKDIR /usr/src/app -RUN npm install -COPY . . +# Copy the necessary files to the working directory +COPY tools/walletextension/frontend/ . + +# Install dependencies +RUN npm ci + +# Build the Next.js app RUN npm run build + +# Reduce the size of the final image by using a lighter base image +FROM node:20-alpine AS runner + +# Set the working directory +WORKDIR /usr/src/app + +# Copy only the necessary files from the build stage +COPY --from=base /usr/src/app/.next ./.next +COPY --from=base /usr/src/app/public ./public +COPY --from=base /usr/src/app/package*.json ./ + +# Install production dependencies +RUN npm ci --production + + +# Set the environment variables +ENV PORT=80 + +# Expose the port EXPOSE 80 -CMD ["npm", "start"] \ No newline at end of file + +# Start the application +CMD ["npm", "start"] 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; diff --git a/tools/walletextension/frontend/src/components/layouts/header.tsx b/tools/walletextension/frontend/src/components/layouts/header.tsx index 9a1946c88c..a04de0fea8 100644 --- a/tools/walletextension/frontend/src/components/layouts/header.tsx +++ b/tools/walletextension/frontend/src/components/layouts/header.tsx @@ -14,14 +14,14 @@ export default function Header() {
Logo Logo - + - +