I'm about to deploy my personal blog, which is built in VueJS and will be hosted and delivered by a web-server written in Go. The posts of the blog are stored and managed by a CMS (ButterCMS) and I retrieve the content I need via fetch API.
While testing and building, I always run it locally so I could keep the CMS secret key hard-coded, but of course I can't deploy it like this. I need to store the secret key somewhere and I saw some articles suggesting to store it in a .env file in the root directory of the project and then reading them via process.env.<key>.
While this approach is is wildly explained online, I also found a lot of sources where this method is not recommended at all (also on Vue docs)
So how am I going to do this? Where or how should I store private keys?
Thank you very much!
First off, if you're having a static website with some content coming from a CMS, you should be using NuxtJS rather than an SPA-only approach for performance and SEO reasons.
You have several ways of hiding something that you're doing on the frontend. Some tokens might even be meant to be exposed publicly, not sure about yours specifically.
But if you're using Nuxt, the easiest way would be to use SSG to generate your project and use the given token at build time. That way, once deployed your users will only see the finally generated project and not the in-between process (skipping the need to have any token).
This is of course assuming that you do not have any runtime calls using this token. But I don't really see why you would, to begin with.
If you do not care about having some automatic CI/CD, you could even work on your project, build it locally, and ship it with all the static assets on the platform of your choice.
To come back to your questions, using env variables is totally fine. The important part is to know in which context you are so that a private one is not exposed while you think it would be private.
In VueJS, you don't really have a lot of ways to hide anything. But you could use your Go server as a middleware or any kind of cloud function for that purpose (obfuscating the token by letting a middleware server do the job and server the result back to your app).