Deploying a Next JS app using Gitlab CI/CD to a Kubernetes cluster may result in ENV_VARS being set to "undefined"

I've been grappling with this issue for quite some time now:

In my standard NextJS app, I'm utilizing environment variables (such as NEXT_PUBLIC_MY_VAR for the client side and MY_OTHER_VAR for the server side).

I'm using Gitlab's CI-CD AutoDevOps with a small custom .gitlab-ci.yml file (shown below).

I've successfully established a connection to my Kubernetes cluster through Gitlab, and my NextJS app deploys without any issues. (The Gitlab/K8s cache has also been cleared)

However, the only obstacle I'm facing is getting the process.env.ENV_VARS to work properly. No matter what I try, they always end up being undefined.

When I manually deployed my app into the cluster and mounted a configMap to my deployment (so that an .env.local file exists at /app/.env.local), ONLY THEN were the ENV_VARS correctly set.

So, how can I ensure that the ENV_VARS are properly configured when deploying my NextJS app via Gitlab Auto DevOps?

Here's what I've attempted so far:

  • Set ENV_VARS in Gitlab -> Settings -> CI/CD -> Variables
...

Is using .env.local the only method to utilize NextJS ENV_VARS in Kubernetes?

Do I need to customize Gitlab AutoDevOps specifically for this particular (yet common) app deployment?

Thank you in advance; any assistance would be greatly appreciated.

kubernetesenvironment-variablesnext.jsgitlab-ci

Answer №1

If you opt for Auto Devops on GITLAB then it is essential to configure the Gitlab ENV Variable 

AUTO_DEVOPS_BUILD_IMAGE_EXTRA_ARGS
and specify it as

--build-arg=NEXT_PUBLIC_API_URL=http://your.domain.com/api

In your Dockerfile, you can set it up using

    ARG NEXT_PUBLIC_API_URL
    ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL

For further details, refer to:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of the back button not functioning in the React Multi-level push menu SCSS has

I have been developing a mobile-friendly Multi-level push navigation menu for my website using dynamically generated links based on projects from my GitHub account. I found a push menu on CodePen here and am in the process of integrating it into React inst ...

cssreactjssassnavigationnext.js

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile ...

cssnext.jsmobilematerial-uiviewport

How can we display an absolutely positioned div when hovering over a card with the help of Tailwind CSS?

I am currently working on a Next.js application with Tailwind CSS. I would like to implement a feature where additional information is displayed when hovering over a product card, similar to the functionality seen on wildberries.ru. I have tried using &apo ...

cssreactjsnext.jstailwind-csscss-position

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Is it possible to customize the default styling options in Tailwind?

I am currently working on a blog using NextJS, and I have encountered an issue with Tailwind's list style type. It seems that the default styling for list style type is set to list-none, resulting in my <ul> <li> elements not being styled ...

htmlcssnext.jshtml-liststailwind-css

Adjust Sidebar Height to Match Document Height (using React Pro Sidebar)

Having an issue with the height of a sidebar component in Next.js using React Pro Sidebar. It seems to be a JavaScript, HTML, and CSS related problem. I've tried several suggested solutions from Stack Overflow, but none of them seem to work. Surprisin ...

javascripthtmlcssreactjsnext.js

Experience a unique double scrolling effect using the react-spring parallax and react-three-fiber Canvas components

My goal is to create a scrolling box with a parallax effect, but I'm facing an issue where it won't bind with the Canvas element, even when both are included under the same div. In the screenshot provided, you can see div1 and div2 each having t ...

htmlcssnext.jsreact-springreact-three-fiber

Unleashing the power of Sass and CSS in your Next Js project

Trying to incorporate sass and css modules into my next.config.js has been challenging due to an error I keep encountering: Failed to compile. ./node_modules/@riskalyze/react-ui/node_modules/@riskalyze/calendar/assets/index.css Unknown word (1:1) > 1 ...

csssassnext.jscss-loader

Maintaining the image's aspect ratio using the Next Image component

Currently, I am using Next's Image component to display a logo. Although the image itself is 1843x550 px, I have specified the width and height properties to adjust it to fit within a space of 83x24 px. However, due to a slightly different aspect rati ...

htmlcssreactjsimagenext.js

When using NextJS, the dynamically generated HTML elements do not get affected by CSS repaint

Recently, I encountered an issue while working on a Next.js project involving the addition of an external script that uses vanilla JavaScript to dynamically create nodes. Despite importing global CSS at the top of my _app.js file, I noticed that the styles ...

javascripthtmlcssreactjsnext.js

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

javascriptcssreactjsnext.jstailwind-css

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

cssreactjsnext.jsflexboxchakra-ui

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Having trouble overriding the default Calendar.css file in NextJS while creating a calendar component. Even after adding my own custom styles, they aren't being applied. Deleting the css file contents doesn't change the format either. Only when c ...

cssreactjsnpmnext.jsreact-calendar

Unusual Display of Mantine Radio Button

I am currently using Mantine v7.0.0 in combination with Next.js v13.5.2 and Tailwind v3.3.3. In my setup, when I create <Radio /> elements, the svg of the element is appearing separately from the radio button instead of replacing it. This issue can b ...

cssnext.jstailwind-cssmantine

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

csstypescriptnext.jscompiler-errorstailwind-css

React NextJS CSS - Setting the section's height to 100% of the parent's height results in taking up 100% of the page's height

I've encountered an issue while transferring my project to NextJS from Create-React-App. In NextJS, setting the height of a section to 100% is causing it to take up the entire page height instead of adjusting for the header and footer elements. I nee ...

cssreactjsnext.js

Is there a way to remove the scrollbar from the menu created with react-burger-menu?

How can I remove the scroll bar from the menu created with react-burger-menu? Despite trying various CSS properties adjustments, I have not been able to achieve the desired effect. Here is an image of the open menu and the corresponding CSS: (https://i.st ...

cssreactjsnext.jsmenuhamburger-menu

A guide on changing the style of a Layout component in React

Currently, I am utilizing Next.js alongside Material-UI as the framework of choice. Within my project, there is a Layout component that encapsulates the content with Material-UI's <Container>. I desire to customize the style of the Layout compon ...

cssreactjsmaterial-uinext.js

Ensure your mobile device is age 13 or over before proceeding

I am developing a project with Next js. Here, I want to render a component if it is a mobile device. However, if I use the isMobileDevice value in jsx, I get the errors below. import useTranslation from "next-translate/useTranslation"; import isM ...

javascriptcssreactjsnext.jsjsx