smallfish

Deployment

Using Docker

Before that, you need to know what Docker is and install it.

If you choose Docker, then we recommend using nginx as the web container. With a simple configuration you can get a standalone, stable web static server.

If you want to get started quickly, go directly to Scaffolding for a real example.

The following will also be combined with this scaffolding to show how to integrate your application into the Docker.

Created Dockfile

First create a Dockerfile in your directory to tell Docker how to handle your application, usually like this:

FROM nginx # to nginx mirroring the basis

WORKDIR /usr/src/app/ # Specify your working directory

COPY ./Docker/nginx.conf /etc/nginx/conf.d/default.conf # Replace the custom nginx configuration

COPY ./Docker/ssl /etc/nginx/ssl/ # Replace ssl certificate to support https

COPY ./dist /usr/share/nginx/html/ # Replace dist as a static mapping directory

EXPOSE 80 443 # http port & https port

CMD ["nginx", "-g", "daemon off;"] #start nginx

The above is a basic Dockerfile, from which we can see that we need to create a new Docker folder in the root directory to store the relevant configuration: nginx.conf and ssl certificate.

Configuring Nginx

The nginx example is already configured in the smallfish scaffolding and you can use it directly.

Server {
    Listen 80;
    # gzip config
    Gzip on;

    Root /usr/share/nginx/html;

    Location / {
        # browserHistory
        #try_files $uri $uri/ /index.html;

        # hashHistory
        Index index.html;
    }

    # location /api {
    # proxy_pass [your service host];
    # proxy_set_header X-Forwarded-Proto $scheme;
    # proxy_set_header Host $http_host;
    # proxy_set_header X-Real-IP $remote_addr;
    # }

}

# https
Server {
    # https + http2
    #听 443 ssl http2;

    # https
    Listen 443 ssl;

    Server_name localhost;

    # /etc/nginx/nginx.conf
    Ssl_certificate /etc/nginx/ssl/server.crt;
    Ssl_certificate_key /etc/nginx/ssl/server.key;
    Ssl_session_timeout 5m;

    Root /usr/share/nginx/html;

    Location / {
        # browserHistory
        #try_files $uri $uri/ /index.html;

        # hashHistory
        Index index.html;
    }

    # location /api {
    # proxy_pass [your service host];
    # proxy_set_header X-Forwarded-Proto $scheme;
    # proxy_set_header Host $http_host;
    # proxy_set_header X-Real-IP $remote_addr;
    # }
}

Setting up the deployment steps

In addition to directly packaging the image, we sometimes need to run the image to see if it meets expectations, so we need a Docker-compose.yml to help us quickly run a Docker service.

Add Docker-compose.yml under Docker:

Version: '3.5'

Services:
  Smallfish-web:
    Image: nginx
    Ports:
      - 80:80
      - 443:443
    Container_name: 'smallfish-web_dev'
    Restart: unless-stopped
    Volumes:
      - ../dist:/usr/share/nginx/html:ro
      - ./ssl:/etc/nginx/ssl:ro
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

Volumes:
  Dist:

Then add a few commands to our package.json:

{
  Script: {
    ...
    "Docker:dev": "Docker-compose -f ./Docker/Docker-compose.yml up",
    "Docker:build": "smallfish build && Docker build -f Dockerfile -t smallfish-web ./",
    ...
  }
}

Running npm run Docker:dev will run the current project in Docker mode, while npm run Docker:build will build an image that you can deploy to a platform that supports Docker.

Https Certificate

The certificate for https can be generated by [openssl] (https://www.openssl.org/source/).

← Directory Structure →