Merge pull request #294 from wyeworks/route-rewrites

Tunnel requests to backend through Next
wyeworks · Jun 6, 2024 · 9febb8c · 9febb8c
2 parents 6f87342 + fe93fc8
commit 9febb8c
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 29 deletions.
diff --git a/.github/workflows/run-frontend-compiler.yml b/.github/workflows/run-frontend-compiler.yml
@@ -3,6 +3,8 @@ on: push
 jobs:
   NextJS:
     runs-on: ubuntu-latest
+    env:
+      NEXT_INTERNAL_API_URL: http://phoenix:4000/api
     defaults:
       run:
         working-directory: "frontend"

diff --git a/README.md b/README.md
@@ -66,11 +66,9 @@ Environment variables are configuration units relevant to the app's build or run
 ## Frontend
 
 | Key                     | Description                                                                                                                                                                  | Recommended value for dev                                                                                   |
-| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| `NEXT_PUBLIC_API_URL`   | URL of the backend server API                                                                                                                                                | `http://localhost:4000/api`                                                                                 |
-| `NEXT_PUBLIC_FILES_URL` | URL of the backend server files                                                                                                                                              | `http://localhost:4000/files`                                                                               |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |                                                                                                                                          | `http://localhost:4000/files`                                                                               |
 |`NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY`| Sitekey from Google Recaptcha| Sign up for one in `http://www.google.com/recaptcha/admin`
-| `NEXT_INTERNAL_API_URL` | URL of the backend server API. For use in a closed environment. Set to the same value of `NEXT_PUBLIC_API_URL` if Phoenix server public url is reachable from NextJS server. | `http://localhost:4000/api`                                                                                 |
+| `NEXT_INTERNAL_API_URL` | URL of the backend server API. For use in a closed environment. | `http://localhost:4000/api`                                                                                 |
 | `NEXTAUTH_URL`          | The canonical URL of the site ([read more](https://next-auth.js.org/configuration/options#nextauth_url))                                                                     | `http://localhost:3000`                                                                                     |
 | `NEXTAUTH_SECRET`       | Secret for JWT encryption                                                                                                                                                    | Generate with `openssl rand -base64 32`                                                                     |
 | `NEXT_PORT`             | NextJS port                                                                                                                                                                  | `3000`                                                                                                      |
@@ -91,7 +89,6 @@ Environment variables are configuration units relevant to the app's build or run
 | `PHX_HOST`                 | Phoenix host                                                                                                      | `localhost`                                                                                                 |
 | `PHX_PORT`                 | Phoenix port                                                                                                      | `4000`                                                                                                      |
 | `PHX_SECRET_KEY_BASE`      | Phoenix secret key base                                                                                           | Generate with `mix phx.gen.secret`                                                                          |
-| `PHX_CONSUMER_URL`         | URL of the frontend api. This is used to configure CORS headers                                                   | `http://localhost:3000`                                                                                     |
 | `POSTGREX_TIMEOUT`         | Timeout in milliseconds for database requests. Optional. Default is 15000. **Must be available in compile time.** | 15000                                                                                                       |
 |`GOOGLE_RECAPTCHA_SECRET_KEY`| Sitekey from Google Recaptcha| Sign up for one in `http://www.google.com/recaptcha/admin`
 |`GOOGLE_RECAPTCHA_VERIFICATION_URL`|URL to verify Google Recaptcha tokens |`https://www.google.com/recaptcha/api/siteverify`
@@ -151,7 +148,7 @@ Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
 
 ### Backend secrets
 
-To configure backend secrets in development mode, you should create a file named `dev.local.exs` in `backend/config` and add the relevant configuration for `google_*` and `smtp_*`. These variables are the same as those described in the [environment variables](#environment-variables) section, although downcased. `phx_consumer_id` is already predefined in `config/dev.exs`, but it can be overrided by defining a value in `dev.local.exs`.
+To configure backend secrets in development mode, you should create a file named `dev.local.exs` in `backend/config` and add the relevant configuration for `google_*` and `smtp_*`. These variables are the same as those described in the [environment variables](#environment-variables) section, although downcased.
 
 The configuration file must follow this format:
 

diff --git a/backend/lib/richard_burton_web/router.ex b/backend/lib/richard_burton_web/router.ex
@@ -50,7 +50,7 @@ defmodule RichardBurtonWeb.Router do
     post("/users", UserController, :create)
   end
 
-  scope "/files", RichardBurtonWeb do
+  scope "/api/files", RichardBurtonWeb do
     pipe_through(:files)
     pipe_through(:authorize_admin)
 

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -4,13 +4,8 @@ services:
     build:
       target: dev
       args:
-        NEXT_PUBLIC_API_URL: $NEXT_PUBLIC_API_URL
-        NEXT_PUBLIC_FILES_URL: $NEXT_PUBLIC_FILES_URL
         NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY: $NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY
     environment:
-      # Browser
-      NEXT_PUBLIC_API_URL: http://localhost:4000/api
-      NEXT_PUBLIC_FILES_URL: http://localhost:4000/files
       # Server
       PORT: 3000
       NEXT_INTERNAL_API_URL: http://host.docker.internal:4000/api

diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
@@ -4,13 +4,11 @@ services:
     build:
       target: prod
       args:
-        NEXT_PUBLIC_API_URL: $NEXT_PUBLIC_API_URL
-        NEXT_PUBLIC_FILES_URL: $NEXT_PUBLIC_FILES_URL
+        NEXT_INTERNAL_API_URL: $NEXT_INTERNAL_API_URL
         NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY: $NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY
     environment:
       # Server
       PORT: $NEXT_PORT
-      NEXT_INTERNAL_API_URL: $NEXT_INTERNAL_API_URL
       # Next Auth
       NEXTAUTH_SECRET: $NEXTAUTH_SECRET
       NEXTAUTH_URL: $NEXTAUTH_URL

diff --git a/frontend/.env.development b/frontend/.env.development
@@ -1,7 +1,3 @@
-# Browser
-NEXT_PUBLIC_API_URL=http://localhost:4000/api
-NEXT_PUBLIC_FILES_URL=http://localhost:4000/files
-
 # Next Server
 NEXT_INTERNAL_API_URL=http://localhost:4000/api
 NEXTAUTH_SECRET=BL0fViv5sZ4XAjrNLqyQvf1ctwHPafwzRHtnPYAQlAU

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
@@ -14,12 +14,10 @@ RUN \
 
 # Rebuild the source code only when needed
 FROM node:21-alpine AS builder
-ARG NEXT_PUBLIC_API_URL
-ARG NEXT_PUBLIC_FILES_URL
+ARG NEXT_INTERNAL_API_URL
 ARG NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY
-ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
-ENV NEXT_PUBLIC_FILES_URL=$NEXT_PUBLIC_FILES_URL
 ENV NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY=$NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY
+ENV NEXT_INTERNAL_API_URL=$NEXT_INTERNAL_API_URL
 
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules

diff --git a/frontend/components/PublicationDownload.tsx b/frontend/components/PublicationDownload.tsx
@@ -1,4 +1,4 @@
-import { FILES_URL, request } from "app";
+import { request } from "app";
 import DownloadIcon from "assets/download.svg";
 import { snakeCase } from "lodash";
 import { Publication } from "modules/publication";
@@ -32,7 +32,7 @@ const PublicationDownload: FC = () => {
         );
 
         const { data, headers } = await http.get(
-          `${FILES_URL}/publications?${query}`,
+          `/files/publications?${query}`,
           { responseType: "blob" },
         );
 

diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -3,6 +3,15 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
 
+  async rewrites() {
+    return [
+      {
+        source: "/api/v1/:path*",
+        destination: `${process.env.NEXT_INTERNAL_API_URL}/:path*`,
+      },
+    ];
+  },
+
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -9,12 +9,10 @@ import { FC } from "react";
 import { RecoilRoot } from "recoil";
 import "styles/globals.css";
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL;
-const FILES_URL = process.env.NEXT_PUBLIC_FILES_URL;
 const GOOGLE_RECAPTCHA_SITEKEY =
   process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITEKEY!;
 
-const http = HTTP.client({ baseURL: API_URL });
+const http = HTTP.client({ baseURL: "/api/v1" });
 
 http.interceptors.request.use(async (config) => {
   const session = await getSession();
@@ -90,4 +88,4 @@ const App: FC<AppProps> = ({ Component, pageProps }) => {
 };
 
 export default App;
-export { API_URL, FILES_URL, GOOGLE_RECAPTCHA_SITEKEY, http, Key, request };
+export { GOOGLE_RECAPTCHA_SITEKEY, http, Key, request };