<p>I stick to this problem quite long now:</p>
<p>I have a standard NextJS app, which uses environment variables (for client side <code>NEXT_PUBLIC_MY_VAR</code> as well for server side ones <code>MY_OTHER_VAR</code>).</p>
<p>I use the Gitlab CI-CD AutoDevOps with an tiny custom <code>.gitlab-ci.yml</code>-file (see below).</p>
<p>I have a successful connection to my Kubernetes cluster with Gitlab, and my NextJS app is getting also deployed successfully. (Gitlab/K8s cache cleaned, too)</p>
<p>The only thing where I struggle is to get the <code>process.env.ENV_VARS</code> running.
Whatever I tried they are <code>undefined</code>.</p>
<p>I deployed my app manually into the cluster, and mounted a configMap to my deployment ( so a <code>.env.local</code>-file is present at <code>/app/.env.local</code>
<strong>ONLY THEN the <code>ENV_VARS</code> are set correctly.</strong></p>
<p>So how to set the <code>ENV_VARS</code> when deploying my NextJS app via Gitlab Auto DevOps?</p>
<p>I've tried so far:</p>
<ul>
<li>setting <code>ENV_VARS</code> in Gitlab -&gt; Settings -&gt; CI/CD -&gt; Variables</li>
</ul>
<p><a href="https://i.stack.imgur.com/eeMTc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eeMTc.png" alt="Gitlab ENV Vars" /></a></p>
<ul>
<li>I added an ARG in my Dockerfile which should pick up the Gitlab CI vars when building the Docker image:</li>
</ul>
<pre><code>FROM node:alpine AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci 
# ...
# ..

# docker build --build-arg API_URL=http://myApiEndpoint
ARG API_URL
ENV API_URL=$API_URL
RUN npm run build

FROM node:alpine AS runner
WORKDIR /app

ENV NODE_ENV production

# COPY --from=builder /app/next.config.js ./ # TRIED WITH AND WITHOUT
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN chown -R nextjs:nodejs /app/.next

USER nextjs

EXPOSE 5000

CMD [&quot;npm&quot;, &quot;run&quot;, &quot;start&quot;]
</code></pre>
<ul>
<li>I have also added the ENV_VARS also in my <code>next.config.js</code></li>
</ul>
<pre class="lang-js prettyprint-override"><code>
module.exports = withSvgr({
    serverRuntimeConfig: {},
    publicRuntimeConfig: {
        NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
        API_URL: process.env.API_URL,
    },
});

</code></pre>
<ul>
<li>I also added a custom <code>.gitlab-ci.yml</code> file (complete file here):</li>
</ul>
<p>yaml
include:
- template: Auto-DevOps.gitlab-ci.yml</p>
<pre><code># added vars for build
build:
  stage: build
  variables:
    API_URL: $API_URL
</code></pre>
<p>This is the error message in my POD</p>
<pre><code>&gt; metashop-frontend.react@1.8.0 start
&gt; next start -p 5000
ready - started server on 0.0.0.0:5000, url: http://localhost:5000
ApiURL alias: undefined #### &lt;&lt;&lt;---- 
API_URL: undefined      #### &lt;&lt;&lt;---- 
TypeError: Only absolute URLs are supported
    at getNodeRequestOptions (/app/node_modules/node-fetch/lib/index.js:1305:9)
    at /app/node_modules/node-fetch/lib/index.js:1410:19
    at new Promise (&lt;anonymous&gt;)
    at fetch (/app/node_modules/node-fetch/lib/index.js:1407:9)
    at Object.getItems (/app/.next/server/pages/_app.js:1194:12)
    at getServerSideProps (/app/.next/server/pages/index.js:2952:55)
    at renderToHTML (/app/node_modules/next/dist/next-server/server/render.js:40:221)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /app/node_modules/next/dist/next-server/server/next-server.js:109:97
    at async /app/node_modules/next/dist/next-server/server/next-server.js:102:142
</code></pre>
<p>And is the code that the error refers to:</p>
<pre class="lang-js prettyprint-override"><code>const ApiUrl = process.env.API_URL;

console.log(&quot;ApiURL alias:&quot;, ApiUrl);
console.log(&quot;API_URL:&quot;, process.env.API_URL);
console.log(&quot;NEXT_PUBLIC_API_URL:&quot;, process.env.NEXT_PUBLIC_API_URL);
return fetch(`${ApiUrl}/items.json?${qs.stringify(options)}`).then(
    (response) =&gt; response.json()
);
</code></pre>
<p>and for completeness (but mostly useless) the tail of the failing job (which seems the normal error when K8s not responding):</p>
<pre><code>Error: release production failed, and has been uninstalled due to atomic being set: timed out waiting for the condition
Uploading artifacts for failed job
00:01
Uploading artifacts...
WARNING: environment_url.txt: no matching files    
WARNING: tiller.log: no matching files             
ERROR: No files to upload                          
Cleaning up file based variables
00:01
ERROR: Job failed: exit code 1
</code></pre>
<h2>is <code>.env.local</code> the only way to use NextJS ENV_VARS in Kubernetes?</h2>
<h2>Do I have to customize the Gilab AutoDevOps for this particular (and common) app deployment?</h2>
<p>Thank you in advance, any help would be appreciated</p>

Jan
<p>If you stick on Auto Devops on <strong>GITLAB</strong> then YOU HAVE TO set this Gitlab ENV Variable <code>AUTO_DEVOPS_BUILD_IMAGE_EXTRA_ARGS</code> and set it to</p>
<p><code>--build-arg=NEXT_PUBLIC_API_URL=http://your.domain.com/api</code></p>
<p>In your Dockerfile you can assign it via</p>
<pre><code>    ARG NEXT_PUBLIC_API_URL
    ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
</code></pre>
<p>More information here:</p>
<p><a href="https://docs.gitlab.com/ee/topics/autodevops/customize.html#passing-arguments-to-docker-build" rel="nofollow noreferrer">https://docs.gitlab.com/ee/topics/autodevops/customize.html#passing-arguments-to-docker-build</a></p>
