CODEWITHSUNDEEP
node.jsvue.jssslnuxt.js
Fabian
Fabian

Reputation: 326

Implementing SSL for Nuxt.js 3.9 in a Production Environment

I'm working on a project that includes a frontend developed with Vue.js/Nuxt.js and a backend powered by Java Spring. For deployment, I've containerized both components into a single Docker image, which is then deployed to a Kubernetes cluster on a separate network. My deployment process involves fetching SSL certificates via a curl command in the entrypoint script, which are intended for use by both the frontend and backend services. I have configured my network to put through the two Ports of the Front- and Backend that share the same IP Address.

I've successfully implemented SSL for the backend service but am encountering difficulties in applying SSL to the frontend. While there is abundant documentation on setting up SSL for local development environments, my goal is to integrate SSL directly into the Nuxt.js build process for deployment within a LAN, bypassing the need for a reverse proxy to manage SSL.

My question is: How can I configure Nuxt.js 3.9 to utilize SSL certificates for a production build, ensuring secure communication without relying on a reverse proxy for SSL termination or management?

EDIT

What I tried:

Upvotes: 2

Views: 960

Answers (1)

Vivick
Vivick

Reputation: 4991

I don't know if it's documented anywhere on the Nuxt website, but when you inspect the code generated by nuxi build, notably .output/server/chunks/nitro/node-server.mjs you'll notice a few env variables:

const cert = process.env.NITRO_SSL_CERT;
const key = process.env.NITRO_SSL_KEY;
const server = cert && key ? new Server({ key, cert }, toNodeListener(nitroApp.h3App)) : new Server$1(toNodeListener(nitroApp.h3App));
// [...]
const listener = server.listen(path ? { path } : { port, host }, (err) => {
  // [...]
  const protocol = cert && key ? "https" : "http";
  // [...]
  const baseURL = (useRuntimeConfig().app.baseURL || "").replace(/\/$/, "");
  const url = `${protocol}://${addressInfo.family === "IPv6" ? `[${addressInfo.address}]` : addressInfo.address}:${addressInfo.port}${baseURL}`;
  console.log(`Listening on ${url}`);
});
// [...]

Therefore, if you want to use SSL with Nitro, you'll just have to define two env variables:

  • NITRO_SSL_CERT the path to the SSL certificate
  • NITRO_SSL_KEY the path to the SSL key

You can always read more about Nitro's use of env variables

It should be noted that most people would recommend using a reverse proxy nonetheless.

Upvotes: 3

Related Questions