From 1fec8df4556e6d1635ae7f90b8f5fca224c40ca3 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Sun, 11 Mar 2018 23:06:52 +0000 Subject: [PATCH 01/14] First draft with 'Simple Example' section --- src/v2/cookbook/dockerize-vuejs-app.md | 52 ++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 src/v2/cookbook/dockerize-vuejs-app.md diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md new file mode 100644 index 0000000000..36fd989571 --- /dev/null +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -0,0 +1,52 @@ +--- +title: Dockerize Vue.js App +type: cookbook +order: 8 +--- + +## Simple Example + +So you built your first Vue.js app using the amazing [Vue.js webpak template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container. + +Let's start by creating a `Dockerfile` in the root folder of our project: + +```docker +FROM node:9.8.0-alpine + +# install simple http server for serving static content +RUN npm install -g http-server + +# make the 'app' folder the current working directory +WORKDIR /app + +# copy both 'package.json' and 'package-lock.json' (if available) +COPY package*.json . + +# install project dependencies +RUN npm install + +# copy project files and folders to the current working directory (i.e. 'app' folder) +COPY . . + +# build app for production with minification +RUN npm run build + +EXPOSE 8080 +CMD [ "http-server", "dist" ] +``` + +It may seem reduntant to first copy `package.json` and `package-lock.json` and then all project files and folders in two separate steps but there is actually [a very good reason for that](http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/) (spoiler: it allows us to take advantage of cached Docker layers). + +Now let's build a Docker image for our Vue.js app: + +```bash +docker built -t vuejs-cookbook/dockerize-vuejs-app . +``` + +Finally, let's run our Vue.js app in a Docker container: + +```bash + docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app +``` + +We should be able to access our Vue.js app on `localhost:8080`. From cb5f8a91527a87f365e125898da089fb4bdeee5a Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 2 Apr 2018 11:48:36 +0200 Subject: [PATCH 02/14] Fix typo on Docker 'build' command --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 36fd989571..1458737751 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -40,7 +40,7 @@ It may seem reduntant to first copy `package.json` and `package-lock.json` and t Now let's build a Docker image for our Vue.js app: ```bash -docker built -t vuejs-cookbook/dockerize-vuejs-app . +docker build -t vuejs-cookbook/dockerize-vuejs-app . ``` Finally, let's run our Vue.js app in a Docker container: From 02c83ccee763e74673f22434e3ec0a2a5bc93992 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 2 Apr 2018 12:02:18 +0200 Subject: [PATCH 03/14] Fix copy of multiple files --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 1458737751..cb834f90aa 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -20,7 +20,7 @@ RUN npm install -g http-server WORKDIR /app # copy both 'package.json' and 'package-lock.json' (if available) -COPY package*.json . +COPY package*.json ./ # install project dependencies RUN npm install From ceb3ac3d9c40107d47eb8d16c36ebb46d95565de Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 2 Apr 2018 12:03:44 +0200 Subject: [PATCH 04/14] Remove unnecessary whitespace --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index cb834f90aa..e5797157cd 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -46,7 +46,7 @@ docker build -t vuejs-cookbook/dockerize-vuejs-app . Finally, let's run our Vue.js app in a Docker container: ```bash - docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app +docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app ``` We should be able to access our Vue.js app on `localhost:8080`. From 05987475f7604260791df4e5ac302fcce202500e Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 2 Apr 2018 12:30:01 +0200 Subject: [PATCH 05/14] Fix typo in webpack template link --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index e5797157cd..3171388c5b 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -6,7 +6,7 @@ order: 8 ## Simple Example -So you built your first Vue.js app using the amazing [Vue.js webpak template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container. +So you built your first Vue.js app using the amazing [Vue.js webpack template](https://github.com/vuejs-templates/webpack) and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container. Let's start by creating a `Dockerfile` in the root folder of our project: From 59357e1e83b32b69d7ef8de8fece4d3075900918 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Tue, 10 Apr 2018 09:49:23 +0100 Subject: [PATCH 06/14] First draft of 'Real-World Example' --- src/v2/cookbook/dockerize-vuejs-app.md | 64 ++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 3171388c5b..ac0f99b2dc 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -50,3 +50,67 @@ docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/doc ``` We should be able to access our Vue.js app on `localhost:8080`. + +## Real-World Example + +In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app. Your colleagues are impressed but your boss is still shaking his head because we chose not to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/). Now we are going to make it right. + +Let's refactor our `Dockerfile` to use NGINX: + + ```docker +FROM node:9.8.0-alpine + +# install NGINX +RUN apk --no-cache add nginx + +# make the 'app' folder the current working directory +WORKDIR /app + +# copy both 'package.json' and 'package-lock.json' (if available) +COPY package*.json ./ + +# install project dependencies +RUN npm install + +# copy NGINX configuration file +COPY nginx.conf /etc/nginx/nginx.conf + +# copy project files and folders to the current working directory (i.e. 'app' folder) +COPY . . + +# build app for production with minification +RUN npm run build + +EXPOSE 8080 +CMD ["nginx", "-g", "daemon off; pid /tmp/nginx.pid;"] +``` + +Let's create the NGINX configuration file in the root of our project: + +```nginx +events { } + +http { + server { + listen 8080; + location / { + root /app/dist; + index index.html; + } + } +} +``` + +Now let's build a Docker image for our Vue.js app: + +```bash +docker build -t vuejs-cookbook/dockerize-vuejs-app . +``` + +Finally, let's run our Vue.js app in a Docker container: + +```bash +docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app +``` + +We should be able to access our Vue.js app on `localhost:8080`. From a8f2f01e836b831e545e862b73cff01cda32e562 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Tue, 10 Apr 2018 21:53:35 +0100 Subject: [PATCH 07/14] Update 'Real-World Example' with multi-stage build --- src/v2/cookbook/dockerize-vuejs-app.md | 53 ++++++++------------------ 1 file changed, 15 insertions(+), 38 deletions(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index ac0f99b2dc..95e0f7436e 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -11,7 +11,7 @@ So you built your first Vue.js app using the amazing [Vue.js webpack template](h Let's start by creating a `Dockerfile` in the root folder of our project: ```docker -FROM node:9.8.0-alpine +FROM node:9.11.1-alpine # install simple http server for serving static content RUN npm install -g http-server @@ -37,7 +37,7 @@ CMD [ "http-server", "dist" ] It may seem reduntant to first copy `package.json` and `package-lock.json` and then all project files and folders in two separate steps but there is actually [a very good reason for that](http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/) (spoiler: it allows us to take advantage of cached Docker layers). -Now let's build a Docker image for our Vue.js app: +Now let's build the Docker image of our Vue.js app: ```bash docker build -t vuejs-cookbook/dockerize-vuejs-app . @@ -58,50 +58,27 @@ In the previous example, we used a simple, zero-configuration command-line [http Let's refactor our `Dockerfile` to use NGINX: ```docker -FROM node:9.8.0-alpine - -# install NGINX -RUN apk --no-cache add nginx - -# make the 'app' folder the current working directory +# build stage +FROM node:9.11.1-alpine as build-stage WORKDIR /app - -# copy both 'package.json' and 'package-lock.json' (if available) COPY package*.json ./ - -# install project dependencies RUN npm install - -# copy NGINX configuration file -COPY nginx.conf /etc/nginx/nginx.conf - -# copy project files and folders to the current working directory (i.e. 'app' folder) COPY . . - -# build app for production with minification RUN npm run build -EXPOSE 8080 -CMD ["nginx", "-g", "daemon off; pid /tmp/nginx.pid;"] +# production stage +FROM nginx:1.13.12-alpine as production-stage +COPY --from=build-stage /app/dist /usr/share/nginx/html +EXPOSE 80 +CMD ["nginx", "-g", "daemon off;"] ``` -Let's create the NGINX configuration file in the root of our project: +Ok, let's see what's going on here: +* we have split our original `Dockerfile` in multiple stages by leveraging the Docker [multi-stage builds](https://docs.docker.com/develop/develop-images/multistage-build/) feature; +* the first stage is responsible for building a production-ready artifact of our Vue.js app; +* the second stage is responsible for serving such artifact using NGINX. -```nginx -events { } - -http { - server { - listen 8080; - location / { - root /app/dist; - index index.html; - } - } -} -``` - -Now let's build a Docker image for our Vue.js app: +Now let's build the Docker image of our Vue.js app: ```bash docker build -t vuejs-cookbook/dockerize-vuejs-app . @@ -110,7 +87,7 @@ docker build -t vuejs-cookbook/dockerize-vuejs-app . Finally, let's run our Vue.js app in a Docker container: ```bash -docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app +docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app ``` We should be able to access our Vue.js app on `localhost:8080`. From a8f28e25667ab695065c541c7c66781c60c7caa9 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 13 Apr 2018 09:23:36 +0100 Subject: [PATCH 08/14] Add 'Why Dockerize a Vue.js App?' section --- src/v2/cookbook/dockerize-vuejs-app.md | 29 ++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 95e0f7436e..4e004e4eab 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -51,6 +51,35 @@ docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/doc We should be able to access our Vue.js app on `localhost:8080`. +## Why Dockerize a Vue.js App? + +If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google's `I'm feeling lucky` button, let me share with you a couple of good reasons for doing that. + +Today's modern trend is to build applications using the [Cloud-Native](https://pivotal.io/cloud-native) approach which revolves mainly around the following buzzwords: +* Microservices +* DevOps +* Continuous Delivery + +Let's see how these concepts actually affect our decision of dockerizing our Vue.js app. + +### Effects of Microservices + +By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery. + +So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service. + +### Effects of DevOps + +The adoption of [DevOps](https://martinfowler.com/bliki/DevOpsCulture.html) culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system's business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as "whims of developers"). + +So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a deveveloper's laptop, the production environment or any environment we may think of. + +### Effects of Continuous Delivery + +By levereging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters). + +So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence. + ## Real-World Example In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app. Your colleagues are impressed but your boss is still shaking his head because we chose not to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/). Now we are going to make it right. From 986c50d4cad87809436614ae3f80d11ea226baf2 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 13 Apr 2018 10:06:03 +0100 Subject: [PATCH 09/14] Rename 'Why Dockerize a Vue.js App?' as 'Additinal Context' --- src/v2/cookbook/dockerize-vuejs-app.md | 58 +++++++++++++------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 4e004e4eab..e7a9b98dfa 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -51,35 +51,6 @@ docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/doc We should be able to access our Vue.js app on `localhost:8080`. -## Why Dockerize a Vue.js App? - -If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google's `I'm feeling lucky` button, let me share with you a couple of good reasons for doing that. - -Today's modern trend is to build applications using the [Cloud-Native](https://pivotal.io/cloud-native) approach which revolves mainly around the following buzzwords: -* Microservices -* DevOps -* Continuous Delivery - -Let's see how these concepts actually affect our decision of dockerizing our Vue.js app. - -### Effects of Microservices - -By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery. - -So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service. - -### Effects of DevOps - -The adoption of [DevOps](https://martinfowler.com/bliki/DevOpsCulture.html) culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system's business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as "whims of developers"). - -So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a deveveloper's laptop, the production environment or any environment we may think of. - -### Effects of Continuous Delivery - -By levereging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters). - -So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence. - ## Real-World Example In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app. Your colleagues are impressed but your boss is still shaking his head because we chose not to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/). Now we are going to make it right. @@ -120,3 +91,32 @@ docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/docke ``` We should be able to access our Vue.js app on `localhost:8080`. + +## Additional Context + +If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google's `I'm feeling lucky` button, let me share with you a couple of good reasons for doing that. + +Today's modern trend is to build applications using the [Cloud-Native](https://pivotal.io/cloud-native) approach which revolves mainly around the following buzzwords: +* Microservices +* DevOps +* Continuous Delivery + +Let's see how these concepts actually affect our decision of dockerizing our Vue.js app. + +### Effects of Microservices + +By adopting the [microservices architectural style](https://martinfowler.com/microservices/), we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery. + +So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service. + +### Effects of DevOps + +The adoption of [DevOps](https://martinfowler.com/bliki/DevOpsCulture.html) culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system's business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as "whims of developers"). + +So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a deveveloper's laptop, the production environment or any environment we may think of. + +### Effects of Continuous Delivery + +By levereging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters). + +So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence. From 80c9409394510bf99a87bc4c199473b9d74b6c6f Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 13 Apr 2018 14:53:42 +0100 Subject: [PATCH 10/14] Add 'Alternative Patterns' section --- src/v2/cookbook/dockerize-vuejs-app.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index e7a9b98dfa..24708e2bda 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -120,3 +120,11 @@ So, delivering our Vue.js app as a Docker image helps reducing, if not removing By levereging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters). So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence. + +## Alternative Patterns + +If your company is not into Docker and Kubernetes just yet or you simply want to get your MVP out the door, maybe dockerizing your Vue.js app is not what you need. + +Common alternatives are: +* using an all-in-one platform like [netlify](https://www.netlify.com/); +* hosting your SPA on [Amazon S3](https://aws.amazon.com/s3/) and serving it with [Amazon CloudFront](https://aws.amazon.com/cloudfront/) (see [this](https://serverless-stack.com/chapters/deploy-the-frontend.html) link for a detailed guide). \ No newline at end of file From 6554cffc0d98076d305a7d2f4b69ebacb377e01b Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Fri, 13 Apr 2018 14:58:00 +0100 Subject: [PATCH 11/14] Minor fix on 'Alternative Patterns' --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 24708e2bda..95cf19c4d2 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -126,5 +126,5 @@ So, creating a Docker image for our Vue.js app is a good choice here because tha If your company is not into Docker and Kubernetes just yet or you simply want to get your MVP out the door, maybe dockerizing your Vue.js app is not what you need. Common alternatives are: -* using an all-in-one platform like [netlify](https://www.netlify.com/); +* leveraging an all-in-one platform like [netlify](https://www.netlify.com/); * hosting your SPA on [Amazon S3](https://aws.amazon.com/s3/) and serving it with [Amazon CloudFront](https://aws.amazon.com/cloudfront/) (see [this](https://serverless-stack.com/chapters/deploy-the-frontend.html) link for a detailed guide). \ No newline at end of file From 7f9aa12833c085b97a826df3ba240f7d9e069e1b Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Sun, 15 Apr 2018 21:40:09 +0100 Subject: [PATCH 12/14] Fixed typo --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 95cf19c4d2..626aa77bb5 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -117,7 +117,7 @@ So, delivering our Vue.js app as a Docker image helps reducing, if not removing ### Effects of Continuous Delivery -By levereging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters). +By leveraging the [Continuous Delivery](https://martinfowler.com/bliki/ContinuousDelivery.html) discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called [continuous delivery pipeline](https://martinfowler.com/bliki/DeploymentPipeline.html). The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters). So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence. From c034476eb959a0353ded6e6392991ebb60aa5707 Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 18 Jun 2018 09:41:05 +0100 Subject: [PATCH 13/14] Update order to avoid collision with other cookbooks --- src/v2/cookbook/dockerize-vuejs-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index 626aa77bb5..b162f34342 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -1,7 +1,7 @@ --- title: Dockerize Vue.js App type: cookbook -order: 8 +order: 13 --- ## Simple Example From 94d6437e5e1ae2b49f1679b1860cd4510faead8c Mon Sep 17 00:00:00 2001 From: Fabrizio Cucci Date: Mon, 18 Jun 2018 10:48:12 +0100 Subject: [PATCH 14/14] Clarify why NGINX in real-world example --- src/v2/cookbook/dockerize-vuejs-app.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/v2/cookbook/dockerize-vuejs-app.md b/src/v2/cookbook/dockerize-vuejs-app.md index b162f34342..3491268038 100644 --- a/src/v2/cookbook/dockerize-vuejs-app.md +++ b/src/v2/cookbook/dockerize-vuejs-app.md @@ -53,7 +53,11 @@ We should be able to access our Vue.js app on `localhost:8080`. ## Real-World Example -In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app. Your colleagues are impressed but your boss is still shaking his head because we chose not to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/). Now we are going to make it right. +In the previous example, we used a simple, zero-configuration command-line [http server](https://github.com/indexzero/http-server) to serve our Vue.js app which is perfectly ok for quick prototyping and _may_ even be ok for simple production scenarios. After all, the documentation says: + +> It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning. + +Nevertheless, for realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like [NGINX](https://www.nginx.com/) or [Apache](https://httpd.apache.org/) and that is exactly what we are going to do next: we are about to leverage NGINX to serve our vue.js app because it is considered to be one of the most performant and battle-tested solutions out there. Let's refactor our `Dockerfile` to use NGINX: