setup new environment variables for strapi url (#244)

* setup new environment variables for strapi url

* update docs

docs/deployment.md

@@ -3,9 +3,9 @@ See the following docs for more info about strapi deployment:
 
 ### Setting up ntnu halfadministrated server
 
-###### SSH
+###### Firewall
 
-We have created a firewall rule to allow remote ssh connections, such that we can remote in form a github runner and autodeploy. First we create a firewall rule:
+We have created firewall rules to access website and api.
 
 `/etc/local/firewall.d $ touch ipv4-magnastr-docker-website-git-autodeply.conf`
 
@@ -14,8 +14,14 @@ do `sudo nano ipv4-magnastr-docker-website-git-autodeply.conf` to enter the file
 paste the lines
 
 ```
--I INPUT -p tcp -m tcp --dport 22 -j ACCEPT
 -I INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
+
+# Frontend (next.js node) Open TCP port 3000 for the world:
+-I DOCKER-USER -p tcp -m conntrack --ctorigdstport 3000 -j ACCEPT
+
+# Backend (strapi) Open TCP port 1337 for world:
+-I DOCKER-USER -p tcp -m conntrack --ctorigdstport 1337 -j ACCEPT
+
 ```
 
 ###### PKGSYNC

frontend/.env.development

@@ -1,2 +1,4 @@
-# Database API URL
-HOST_URL=http://localhost:1337
+# Database url for outside requests
+OUTSIDE_STRAPI_URL=http://localhost:1337
+
+INTERNAL_STRAPI_URL=http://localhost:1337

frontend/.env.production

@@ -1,2 +1,5 @@
-# Database url
-HOST_URL=http://localhost:1337
+# Database url for outside requests, set in github repo variables
+OUTSIDE_STRAPI_URL=http://web.hypso.ies.ntnu.no:1337
+
+# Database url for internal requests between the docker containers, set in github repo variables
+INTERNAL_STRAPI_URL=http://backend:1337

frontend/src/app/blog/[articleSlug]/page.tsx

@@ -5,7 +5,7 @@ import { BlocksContent } from "@strapi/blocks-react-renderer";
 import BlockRendererClient from "@/components/BlockRendererClient";
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
 const GET_ARTICLE_BY_SLUG = gql(
     `query ArticleWithSlug($articlesFilters: ArticleFiltersInput) {
@@ -71,8 +71,8 @@ export default async function Page({
         graphqlData.data.articles?.data[0]?.attributes?.author?.data?.attributes
             ?.avatar?.data?.attributes?.url;
 
-    if (HOST_URL && avatarURL != undefined) {
-        avatarURL = HOST_URL + avatarURL;
+    if (OUTSIDE_STRAPI_URL && avatarURL != undefined) {
+        avatarURL = OUTSIDE_STRAPI_URL + avatarURL;
     }
 
     const article = graphqlData.data.articles?.data[0];

frontend/src/app/projects/[projectSlug]/page.tsx

@@ -5,7 +5,7 @@ import { getClient } from "@/lib/ApolloClient";
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import RelatedProjectsAndSatellites from "@/components/RelatedProjectsAndSatellites";
 import { ProjectOrSatellite } from "@/app/satellites/[satelliteSlug]/page";
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
 const GET_PROJECT_BY_SLUG = gql(`
 query Projects($projectFilters: ProjectFiltersInput) {
@@ -70,8 +70,8 @@ export default async function Page({
 
     let projectTitle = projects?.attributes?.slug;
 
-    if (HOST_URL && projectTitle != undefined) {
-        projectTitle = HOST_URL + projectTitle;
+    if (OUTSIDE_STRAPI_URL && projectTitle != undefined) {
+        projectTitle = OUTSIDE_STRAPI_URL + projectTitle;
     }
     return (
         <div className="flex flex-col items-center gap-4">

frontend/src/app/projects/page.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { SlicePreviewText } from "@/components/SlicePreviewText";
 import { OuiImage } from "@/components/fullBlogCard";
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
 const GET_PROJECTS = gql(`
  query GET_PROJECTS {
@@ -65,8 +65,8 @@ export default async function ProjectsPage() {
                         project?.attributes?.previewImage?.data?.attributes
                             ?.url;
 
-                    if (HOST_URL && previewImage != undefined) {
-                        previewImage = HOST_URL + previewImage;
+                    if (OUTSIDE_STRAPI_URL && previewImage != undefined) {
+                        previewImage = OUTSIDE_STRAPI_URL + previewImage;
                     }
                     return (
                         <Link

frontend/src/app/satellites/page.tsx

@@ -7,7 +7,7 @@ import SatelliteStatsTable from "@/components/satelliteData/SatelliteStatsTable"
 import Image from "next/image";
 import { OuiImage } from "@/components/fullBlogCard";
 
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 const GET_SATELLITES = gql(`
 query GET_SATELLITES {
     satellites {
@@ -43,8 +43,8 @@ export default async function Satellites() {
                     let previewImage =
                         satellite?.attributes?.previewImage?.data?.attributes
                             ?.url;
-                    if (HOST_URL && previewImage != undefined) {
-                        previewImage = HOST_URL + previewImage;
+                    if (OUTSIDE_STRAPI_URL && previewImage != undefined) {
+                        previewImage = OUTSIDE_STRAPI_URL + previewImage;
                     }
                     let satelliteName = satellite?.attributes?.name ?? "";
                     let missionStatus =

frontend/src/components/RelatedProjectsAndSatellites.tsx

@@ -1,7 +1,7 @@
 import { ProjectOrSatellite } from "@/app/satellites/[satelliteSlug]/page";
 import Link from "next/link";
 import Image from "next/image";
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function RelatedProjectsAndSatellites({
@@ -10,8 +10,8 @@ export default function RelatedProjectsAndSatellites({
     project: ProjectOrSatellite;
 }) {
     let previewImage = project.previewImage;
-    if (HOST_URL && previewImage != undefined) {
-        previewImage = HOST_URL + previewImage;
+    if (OUTSIDE_STRAPI_URL && previewImage != undefined) {
+        previewImage = OUTSIDE_STRAPI_URL + previewImage;
     }
     const projectOrSatellite = project.isProject ? "projects" : "satellites";
 

frontend/src/components/wrappers/ApolloWrapper.tsx

@@ -10,13 +10,13 @@ import {
     SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
 
-const HOST_URL = process.env.HOST_URL;
+const INTERNAL_STRAPI_URL = process.env.INTERNAL_STRAPI_URL;
 
 // have a function to create a client for you
 function makeClient() {
     const httpLink = new HttpLink({
         // this needs to be an absolute url, as relative urls cannot be used in SSR
-        uri: HOST_URL + "/graphql",
+        uri: INTERNAL_STRAPI_URL + "/graphql",
         // you can disable result caching here if you want to
         // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
         fetchOptions: { cache: "no-store" },

frontend/src/lib/ApolloClient.js

@@ -1,14 +1,14 @@
 import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
 import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
 
-const HOST_URL = process.env.HOST_URL;
+const INTERNAL_STRAPI_URL = process.env.INTERNAL_STRAPI_URL;
 
 export const { getClient } = registerApolloClient(() => {
     return new ApolloClient({
         cache: new InMemoryCache(),
         link: new HttpLink({
             // this needs to be an absolute url, as relative urls cannot be used in SSR
-            uri: HOST_URL + "/graphql",
+            uri: INTERNAL_STRAPI_URL + "/graphql",
             // you can disable result caching here if you want to
             // (this does not work if you are rendering your page with `export const dynamic = "force-static"`)
             fetchOptions: { cache: "no-store" },

frontend/src/lib/data/fetchArticleInfo.tsx

@@ -4,7 +4,7 @@ import { BlocksContent } from "@strapi/blocks-react-renderer";
 import { Enum_Article_Tag } from "@/__generated__/graphql";
 import { BlogPost } from "@/app/blog/page";
 
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
 const GET_ARTICLES = gql(`
 query GET_ARTICLES($pagination: PaginationArg, $filters: ArticleFiltersInput) {
@@ -106,8 +106,8 @@ export default async function fetchArticlePages({
             article?.attributes?.author?.data?.attributes?.avatar?.data
                 ?.attributes?.url;
 
-        if (HOST_URL && avatarURL != undefined) {
-            avatarURL = HOST_URL + avatarURL;
+        if (OUTSIDE_STRAPI_URL && avatarURL != undefined) {
+            avatarURL = OUTSIDE_STRAPI_URL + avatarURL;
         }
 
         const authorName: string | undefined =
@@ -117,8 +117,8 @@ export default async function fetchArticlePages({
         const datePublished: any = article?.attributes?.datePublished;
         let coverImage: string | undefined =
             article?.attributes?.coverImage?.data?.attributes?.url;
-        if (HOST_URL && coverImage != undefined) {
-            coverImage = HOST_URL + coverImage;
+        if (OUTSIDE_STRAPI_URL && coverImage != undefined) {
+            coverImage = OUTSIDE_STRAPI_URL + coverImage;
         }
         let content: BlocksContent = article?.attributes?.body ?? [];
 
@@ -139,7 +139,7 @@ export default async function fetchArticlePages({
             coverImage,
             datePublished,
             tag,
-            HOST_URL,
+            HOST_URL: OUTSIDE_STRAPI_URL,
             authorName,
             avatarURL,
             slug: article.attributes.slug,

frontend/src/lib/data/fetchMostRecentImage.tsx

@@ -2,7 +2,7 @@ import { gql } from "@/__generated__/gql";
 import { getClient } from "../ApolloClient";
 import Image from "next/image";
 
-const HOST_URL = process.env.HOST_URL;
+const OUTSIDE_STRAPI_URL = process.env.OUTSIDE_STRAPI_URL;
 
 const GET_MOST_RECENT_IMAGE = gql(`
 query MostRecentImages {
@@ -43,8 +43,8 @@ export default async function fetchMostrecentImage() {
         graphqlData.data.mostRecentImages?.data[0]?.attributes?.mostRecentImage
             ?.data?.attributes?.url;
 
-    if (HOST_URL && mostRecentImageURL != undefined) {
-        mostRecentImageURL = HOST_URL + mostRecentImageURL;
+    if (OUTSIDE_STRAPI_URL && mostRecentImageURL != undefined) {
+        mostRecentImageURL = OUTSIDE_STRAPI_URL + mostRecentImageURL;
     } else {
         mostRecentImageURL = "";
     }