From 79f3b3733eef03ac4079fa1e8b1f9e422883c7b1 Mon Sep 17 00:00:00 2001 From: Craig Lafferty Date: Thu, 17 Jan 2019 14:26:46 -0600 Subject: [PATCH 1/3] Add docker based nginx deployment guide to docs --- docs/guide/deployment.md | 87 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md index 4b21524660..f17f1c8564 100644 --- a/docs/guide/deployment.md +++ b/docs/guide/deployment.md @@ -319,3 +319,90 @@ Verify your project is successfully published by Surge by visiting `myawesomepro cd - ``` + + +### Docker (Nginx) + +Deploying your application using nginx inside of docker can be done easily with a minor modification of the nginx configuration. + +1. Install [docker](https://www.docker.com/get-started) + +2. Create a `Dockerfile` file in the root of your project. + + ```Dockerfile + FROM node:10 + COPY ./ /app + WORKDIR /app + RUN npm install && npm run build + + FROM nginx + RUN mkdir /app + COPY --from=0 /app/dist /app + COPY nginx.conf /etc/nginx/nginx.conf + ``` + +3. Create a `.dockerignore` file in the root of your project + + Setting up the `.dockerignore` file correctly prevents `node_modules` and any intermediate build artifacts from being copied to the image which can cause issues during building. + + ```gitignore + **/node_modules + **/dist + ``` + +4. Create a `nginx.conf` file in the root of your project + + This is a simple `nginx` configuration that falls back to the root `index.html` page for `404's`. This is necessary when using `pushState()` based routing. + + ```text + user nginx; + worker_processes 1; + error_log /var/log/nginx/error.log warn; + pid /var/run/nginx.pid; + events { + worker_connections 1024; + } + http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + log_format main '$remote_addr - $remote_user [$time_local] "$request" ' + '$status $body_bytes_sent "$http_referer" ' + '"$http_user_agent" "$http_x_forwarded_for"'; + access_log /var/log/nginx/access.log main; + sendfile on; + keepalive_timeout 65; + server { + listen 80; + server_name localhost; + location / { + root /app; + index index.html; + try_files $uri $uri/ /index.html; + } + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } + } + } + ``` + +5. Build your docker image + + ```bash + docker build . -t my-app + # Sending build context to Docker daemon 884.7kB + # ... + # Successfully built 4b00e5ee82ae + # Successfully tagged my-app:latest + ``` + +6. Run your docker image + + This build is based on the official `nginx` image so log redirection has already been set up and self daemonizing has been turned off. Some other default settings have been setup to improve running nginx in a docker container. See the [nginx docker repo](https://hub.docker.com/_/nginx) for more info. + + ```bash + docker run -d -p 8080:80 my-app + curl localhost:8080 + # ... + ``` From a98a3283580e85a31f5be7082b6249ce47ea857e Mon Sep 17 00:00:00 2001 From: Craig Lafferty Date: Thu, 17 Jan 2019 14:29:27 -0600 Subject: [PATCH 2/3] Fix docker/nginx deployment guide formatting to match other deployment guides --- docs/guide/deployment.md | 120 +++++++++++++++++++-------------------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md index f17f1c8564..28764463d4 100644 --- a/docs/guide/deployment.md +++ b/docs/guide/deployment.md @@ -329,80 +329,80 @@ Deploying your application using nginx inside of docker can be done easily with 2. Create a `Dockerfile` file in the root of your project. - ```Dockerfile - FROM node:10 - COPY ./ /app - WORKDIR /app - RUN npm install && npm run build - - FROM nginx - RUN mkdir /app - COPY --from=0 /app/dist /app - COPY nginx.conf /etc/nginx/nginx.conf - ``` + ```Dockerfile + FROM node:10 + COPY ./ /app + WORKDIR /app + RUN npm install && npm run build + + FROM nginx + RUN mkdir /app + COPY --from=0 /app/dist /app + COPY nginx.conf /etc/nginx/nginx.conf + ``` 3. Create a `.dockerignore` file in the root of your project - Setting up the `.dockerignore` file correctly prevents `node_modules` and any intermediate build artifacts from being copied to the image which can cause issues during building. + Setting up the `.dockerignore` file correctly prevents `node_modules` and any intermediate build artifacts from being copied to the image which can cause issues during building. - ```gitignore - **/node_modules - **/dist - ``` + ```gitignore + **/node_modules + **/dist + ``` 4. Create a `nginx.conf` file in the root of your project - This is a simple `nginx` configuration that falls back to the root `index.html` page for `404's`. This is necessary when using `pushState()` based routing. + This is a simple `nginx` configuration that falls back to the root `index.html` page for `404's`. This is necessary when using `pushState()` based routing. - ```text - user nginx; - worker_processes 1; - error_log /var/log/nginx/error.log warn; - pid /var/run/nginx.pid; - events { - worker_connections 1024; - } - http { - include /etc/nginx/mime.types; - default_type application/octet-stream; - log_format main '$remote_addr - $remote_user [$time_local] "$request" ' - '$status $body_bytes_sent "$http_referer" ' - '"$http_user_agent" "$http_x_forwarded_for"'; - access_log /var/log/nginx/access.log main; - sendfile on; - keepalive_timeout 65; - server { - listen 80; - server_name localhost; - location / { - root /app; - index index.html; - try_files $uri $uri/ /index.html; - } - error_page 500 502 503 504 /50x.html; - location = /50x.html { - root /usr/share/nginx/html; + ```text + user nginx; + worker_processes 1; + error_log /var/log/nginx/error.log warn; + pid /var/run/nginx.pid; + events { + worker_connections 1024; + } + http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + log_format main '$remote_addr - $remote_user [$time_local] "$request" ' + '$status $body_bytes_sent "$http_referer" ' + '"$http_user_agent" "$http_x_forwarded_for"'; + access_log /var/log/nginx/access.log main; + sendfile on; + keepalive_timeout 65; + server { + listen 80; + server_name localhost; + location / { + root /app; + index index.html; + try_files $uri $uri/ /index.html; + } + error_page 500 502 503 504 /50x.html; + location = /50x.html { + root /usr/share/nginx/html; + } } } - } - ``` + ``` 5. Build your docker image - ```bash - docker build . -t my-app - # Sending build context to Docker daemon 884.7kB - # ... - # Successfully built 4b00e5ee82ae - # Successfully tagged my-app:latest - ``` + ```bash + docker build . -t my-app + # Sending build context to Docker daemon 884.7kB + # ... + # Successfully built 4b00e5ee82ae + # Successfully tagged my-app:latest + ``` 6. Run your docker image - This build is based on the official `nginx` image so log redirection has already been set up and self daemonizing has been turned off. Some other default settings have been setup to improve running nginx in a docker container. See the [nginx docker repo](https://hub.docker.com/_/nginx) for more info. + This build is based on the official `nginx` image so log redirection has already been set up and self daemonizing has been turned off. Some other default settings have been setup to improve running nginx in a docker container. See the [nginx docker repo](https://hub.docker.com/_/nginx) for more info. - ```bash - docker run -d -p 8080:80 my-app - curl localhost:8080 - # ... - ``` + ```bash + docker run -d -p 8080:80 my-app + curl localhost:8080 + # ... + ``` From 3736d39d0aec25f3a44b1801fc1079df1722ad52 Mon Sep 17 00:00:00 2001 From: Craig Lafferty Date: Wed, 20 Feb 2019 14:55:37 -0600 Subject: [PATCH 3/3] Reword some confusing language and fix some minor formatting --- docs/guide/deployment.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md index 28764463d4..f6e44b250c 100644 --- a/docs/guide/deployment.md +++ b/docs/guide/deployment.md @@ -323,7 +323,7 @@ Verify your project is successfully published by Surge by visiting `myawesomepro ### Docker (Nginx) -Deploying your application using nginx inside of docker can be done easily with a minor modification of the nginx configuration. +Deploy your application using nginx inside of a docker container. 1. Install [docker](https://www.docker.com/get-started) @@ -343,7 +343,7 @@ Deploying your application using nginx inside of docker can be done easily with 3. Create a `.dockerignore` file in the root of your project - Setting up the `.dockerignore` file correctly prevents `node_modules` and any intermediate build artifacts from being copied to the image which can cause issues during building. + Setting up the `.dockerignore` file prevents `node_modules` and any intermediate build artifacts from being copied to the image which can cause issues during building. ```gitignore **/node_modules @@ -352,7 +352,9 @@ Deploying your application using nginx inside of docker can be done easily with 4. Create a `nginx.conf` file in the root of your project - This is a simple `nginx` configuration that falls back to the root `index.html` page for `404's`. This is necessary when using `pushState()` based routing. + `Nginx` is an HTTP(s) server that will run in your docker container. It uses a configuration file to determine how to serve content/which ports to listen on/etc. See the [nginx configuration documentation](https://www.nginx.com/resources/wiki/start/topics/examples/full/) for an example of all of the possible configuration options. + + The following is a simple `nginx` configuration that serves your vue project on port `80`. The root `index.html` is served for `page not found` / `404` errors which allows us to use `pushState()` based routing. ```text user nginx; @@ -380,7 +382,7 @@ Deploying your application using nginx inside of docker can be done easily with try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; - location = /50x.html { + location = /50x.html { root /usr/share/nginx/html; } }