Memisahkan Environment Vuejs

Posted on March 20, 2020

Aku ada sebuah project yang dibuat menggunakan VueJs. Project ini akan dideploy dalam tiga environment:

• Develop
• Staging
• Production

Untuk memudahkan itu, akan aku gunakan docker. Idenya sederhana, yaitu build docker image dengan tag sesuai environmentnya:

• sianu/myapp:v1-develop
• sianu/myapp:v1-staging
• sianu/myapp:v1-production

Kenapa harus dipisah?. Hal itu disebabkan oleh API yang dipisah juga. Untuk setiap environment akan hit API yang berbeda:

• Develop akan hit develop.sianu.com/api
• Staging akan hit staging.sianu.com/api
• Production akan hit production.sianu.com/api

Jika tidak dipisah, akan repot ngatur .env vuejs. Untungnya, vuejs memberi fasilitasi untuk hal begini. Si vue ini enak ngatur .env-nya. Jadi cukup bikin tiga file environment untuk app sianu:

• .env.develop
• .env.staging
• .env.production

Masing-masing .env disii URI api yang sesuai. Dengan begitu, kita tinggal pass parameter ke command npm run build. Jadi untuk build masing-masing env adalah:

Build vue js dalm environment develop:

npm run build -- --mode develop

Build vue js dalm environment staging:

npm run build -- --mode staging

Build vue js dalm environment production:

npm run build -- --mode production

Setelah itu, aku siapkan Dockerfile untuk setiap environment:

• Dockerfile-develop
• Dockerfile-staging
• Dockerfile-production

Isi dari Dockerfile-develop

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build -- --mode develop

FROM nginx:stable-alpine as production-stage
RUN apk --update --no-cache add curl
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
HEALTHCHECK --interval=30s --timeout=3s CMD curl -f http://localhost/ || exit 1
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Isi dari Dockerfile-staging

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build -- --mode staging

FROM nginx:stable-alpine as production-stage
RUN apk --update --no-cache add curl
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
HEALTHCHECK --interval=30s --timeout=3s CMD curl -f http://localhost/ || exit 1
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Isi dari Dockerfile-production

FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build -- --mode production

FROM nginx:stable-alpine as production-stage
RUN apk --update --no-cache add curl
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
HEALTHCHECK --interval=30s --timeout=3s CMD curl -f http://localhost/ || exit 1
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Untuk build docker image masing-masing environment:

Build docker image dengan environment develop:

docker build -t registry.private.com/sianu/myapp:v1-develop -f Dockerfile-develop .

Build docker image dengan environment staging:

docker build -t registry.private.com/sianu/myapp:v1-staging -f Dockerfile-staging .

Build docker image dengan environment production:

docker build -t registry.private.com/sianu/myapp:v1-production -f Dockerfile-production .

Selesai, sekarang aku punya tiga docker image app vuejs dengan environment yg berbeda-beda.

Cool~