CODEWITHSUNDEEP
dockervue.jsnginx
Yuma Nakamura
Yuma Nakamura

Reputation: 23

purse env variable from nginx to vue

As far as I search, there are several tips to place dynamic variables in nginx/conf.d/default.conf.
Instead, I want to activate env variable in apiURLs.js file, which will be loaded in vue files.

# apiURLs.js
export const apiUrls = {
    auth: "http://{{IP_ADDRESS}}:8826/auth/",
    service1: "http://{{IP_ADDRESS}}:8826/",
    service2: "http://{{IP_ADDRESS}}:8827/"
};

# in xxx.vue
let apiUrl = `${apiUrls.auth}login/`;

I tried envsubst in docker-compose.yml as

environment:
  - IP_ADDRESS
command: /bin/sh -c "envsubst < /code/src/apiUrls.js | tee /code/src/apiUrls.js && nginx -g 'daemon off;'"

It appears to works as I go in docker container and confirmed that apiUrls.js is replaced.

However when I check the front app in browser and inspect api via chrome developer tool, it turned out that the api referred is still low url string with env argment, i.e. http://%24%7Bip_address%7D:8826/auth/login.

I suspect that vue project is pre-compiled during making docker image.
Is there some solution?

Or is it possible to purse env variable declared in nginx/conf.d/default.conf to apiURLs.js?

Upvotes: 0

Views: 247

Answers (1)

Jesse Reza Khorasanee
Jesse Reza Khorasanee

Reputation: 3471

Your suspicion is correct. Any js file will almost certainly get processed into a new bundled file by webpack during the vue build, as opposed to being loaded at runtime.

If you can navigate in your docker to the vue project and re-run the build, your env variables should update.

Check package.json in the vue project for different build options. You should get something like:

{
  "name": "vue-example",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
//...

and be able to rebuild it with npm run build

(Also in the name of stating the obvious, remember to disable cache pages in the chrome dev tools when checking the updated site)

Upvotes: 1

Related Questions