Dockerise Nuxt SSR app

## Getting Start
### Pre-requisites
Suppose that we have our nuxt app ready, so then we need to install this following
[Docker](https://docs.docker.com/install/#supported-platforms)
[Docker-Compose](https://docs.docker.com/compose/install/#install-compose)
### Folder structure
we create a sub folder call app and move the entire `app` into it. Then create another sub folder call `nginx`. With this structure, we can build the whole image of our app with its own nginx container, so that we only worry about starting and stopping the app without having to configure nginx and pm2 separately to keep it alive.
<img width="328" alt="Screen Shot 2019-04-12 at 10.33.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211892/e55c693c-ab1d-db6c-1e18-b771fc883c7c.png">

### Create a new Dockerfile
In our app folder create a new file name `Dockerfile`. This file contain all commands that a user could call on the command line to assemble the image.
<img width="328" alt="Screen Shot 2019-04-12 at 10.35.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211892/941d3706-3247-480c-4ab7-f19614491a4c.png">

###### Dockerfile

```dockerfile
FROM node:10.7

ENV APP_ROOT /src

RUN mkdir ${APP_ROOT}
WORKDIR ${APP_ROOT}
ADD . ${APP_ROOT}

RUN npm install
RUN npm run build

ENV HOST 0.0.0.0
```
###### Understanding our Dockerfile

- In this file, we specify the node version we want our container to run
- It also specify the app root directory and then commands we run to build our app
- We set the host to `0.0.0.0` to give full external access to the app container

### Docker Compose
According to the official document, Docker Compose is the tool for defining and running multi-container docker application. With only a single command, we can start all the services from our configuration. Our compose app is located on the root directory of the app
<img width="328" alt="Screen Shot 2019-04-12 at 10.33.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211892/38ab0e65-bc15-9fe7-0ed8-313c04a2e66b.png">
###### docker-compose.yml

```yml
version: "3"

services:
  nuxt:
    build: ./app/
    container_name: nuxt-sample-website
    restart: always
    ports:
      - "3000:3000"
    command:
      "npm run start"
    
  nginx:
    image: nginx:1.13
    container_name: nuxt-sample-nginx
    ports:
      - "443:443"
    volumes:
      - ./nginx:/etc/nginx/conf.d
    depends_on:
      - nuxt
```
- Version: we use compose version `3`
- Services:
    - `nuxt`: 
        - Build: These are the configuration options that are applied at build time
        - container_name: Container's Name
        - restart: Restart policy when the container is exited
        - ports: either specify both ports `HOST:CONTAINER`, or just the container ports (a random host port will be choosen)
        - command: a sort of command to run our app
    - nginx: another service we use. In this case, It will be our server.
        - image: Tag or Partial image ID. will attempt to pull if it doesn't exist locally
        - volumes: specify the volumes to be created as part of our app. This is where we will use our nginx server to inject our nginx config to the container.
        - depends_on: specify the creation order and dependency of containers

### Configure Nginx
Last step is to configure our nginx. By default the app will be running on port 3000 and we will nginx as a reverse proxy.
Now let go to our `nginx` folder and create `default.conf` folder with this following contents:

```conf
server {
    listen 80;
    server_name localhost;

    location / {
        proxy_pass http://nuxt-sample:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
```
In location, we connect directly with our app container, so whatever we call our app, the container will have the same name in this file.
### Running the application
```terminal
$ docker-compose build && docker-compose up -d
```
to check if the our container is up and running -> `docker ps`

Special thanks to [vuevixens](https://vuevixens.org/)!