This is the third article in the “Write a Website from Zero to one” series.

This article mainly introduces the construction of production environment based on cloud server, as well as CI/CD and other tools.

Cloud server

To build a website, you first need a server. Thank you we came to the cloud era, now in the cloud platform to build a cloud server is very convenient, do not have to toss hardware to build a server.

I use Aliyun myself. What platform you use depends on your preferences and where you can find the wool. AWS and GCP seem to be able to use credit cards, while the domestic cloud platform is generally able to use the student identity relatively cheaply. Occasionally there will be double Eleven and other activities, the price is relatively cheap, a year about one or two hundred yuan.

Buy cloud server to pay attention to the host room. The server in the computer room of foreign or Hong Kong area is generally a little more expensive, but you can incidentally build a ladder for your own use. Domestic computer room, try to choose their target users closer to the machine room, so that the network access delay can be slightly lower.

The word of individual website, general lowest configuration went. My personal website is now using ali Cloud 1 core 2G, 1M bandwidth with the lowest version of the server. But low match, need in performance and development process more efforts. Because of low bandwidth, front-end resources need to be put in CDN acceleration as far as possible; Low CPU and memory, try to use local machines to do CI/CD runner machines. These tips will be covered in a later article.

The domain name

Cloud servers give us a fixed public IP address. With public IP, others can access our service. However, IP is not easy to remember, and some scenarios need a domain name (such as wechat public account, using HTTPS, etc.), so it is necessary to apply for a domain name.

Applying for a domain name is relatively simple. On many cloud platforms, you can directly purchase a domain name and configure the MAPPING between IP addresses and domain names. Domain name suffix does not matter, see oneself like. .com is the most widely used. There are also some.com.cn, their own personal websites, you can also use. Me,. Site and so on. A year about dozens of yuan, the first purchase generally have a discount.

However, domain name filing is time-consuming. If you apply for a domain name in China or use a domestic server, you need to put it on record (you can directly upload the information for filing if you buy a domain name on Aliyun). It is recommended to apply for it as soon as possible.

Install the docker

As long as the operating system is Linux, the distribution doesn’t matter much.

After the server is complete, add the local public key generated by SSH to authorized_keys of the server. In this way, you can directly log in to the server without using a password.

Then download and install docker, recommend the built-in yum/apt install line, install docker after completion, you can use to start a nginx instance, in the local browser, see if you can access to. If there is a domain name here you can configure the domain name, see if it can be resolved normally.

sudo apt-get install docker
Copy the code

You can launch a Portainer, which is a lightweight Web interface tool for managing Docker. Especially suitable for docker command is not familiar with or do not like the use of docker command students. You can easily create a Portainer container with this command:

docker run -d -p 9000:9000 \
--privileged --restart=always \
-v /var/run/docker.sock:/var/run/docker.sock \
--name portainer portainer/portainer
Copy the code

Install gogs

Gogs is a code hosting platform, similar to Github, Gitlab, etc. But Github is slow, and Gitlab is a resource hog, so if the server has few resources, it’s not a good fit.

Gogs is very lightweight and can be deployed quickly using Docker.

sudo docker run -d \
--name=gogs --restart=always \
-p 10022:22 -p 10080:3000 \
gogs/gogs
Copy the code

Gogs can be opened by accessing port 10080 of the server in the browser. Initialization is required for the first time. Note the port and URL Settings:

After the installation is complete, go to the profile to configure the SSH public key, and then create your own project, which will not be described in detail.

Install the drone

Drone is a lightweight CI/CD tool. Docker can quickly deploy a Drone service and automatically connect to Gogs:

It also supports Github, Gitlab, Gitea, Bitbucket, etc., requiring different environment variables to be passed in at creation time. For details, please refer to the official documentation: docs.drone. IO /

docker run \
-e DRONE_AGENTS_ENABLED=true \
-e DRONE_GOGS_SERVER=http://yasinshaw.com:10080 \
-e DRONE_RPC_SECRET=your_drone_secret \
-e DRONE_SERVER_HOST=yasinshaw.com:20080 \
-e DRONE_SERVER_PROTO=http \
-e DRONE_USER_CREATE=username:yasin,admin:true \
-p 20080:80 \
-p 20443:443 \
--restart=always \
--detach=true \
--name=drone \
drone/drone:1
Copy the code

Open port 20080 on the server with a browser and a login screen will appear. You need to use the administrator account and password of the GOGS to log in.

The DRONE_USER_CREATE configuration is required, and the value of username is your administrator username. In this way, the Trusted Mode of the project can be enabled, and the host volume can be suspended during building the project. Specific reference: docs. Drone. IO/quickstart /…

Once logged in, the gogs project will be automatically synchronized and a Webhook will be automatically created on the Gogs side.

Create a.drone.yml file in the root directory of our project to configure the CI/CD process of drone, and then submit the code to trigger CI/CD automatically, isn’t it very simple?

But at this time, we only have drone server and no Drone Runner, so there is no runner to perform tasks after triggering, and they will be stuck there all the time. Drone supports many types of runners, including Docker, SSH and so on. We can create a Docker Runner to perform tasks such as build and an SSH Runner to remotely log in to our server and restart the deployment service.

We can create runners on the server or on our own machine. I prefer to use the local server, because the server is more garbage, more local resources.

docker run -d \ -e DRONE_RPC_PROTO=http \ -e DRONE_RPC_HOST=yasinshaw.com:20080 \ -e DRONE_RPC_SECRET=your_drone_secret \ -e DRONE_RUNNER_CAPACITY=2 \ -e DRONE_RUNNER_NAME=runner-docker \ -e DOCKER_API_VERSION=1.38 \ -v /var/run/docker.sock:/var/run/docker.sock \ -p 21300:3000 \ --restart always \ --name runner \ drone/drone-runner-docker  docker run -d \ -e DRONE_RPC_PROTO=http \ -e DRONE_RPC_HOST=yasinshaw.com:20080 \ -e DRONE_RPC_SECRET=your_drone_secret \ -e DOCKER_API_VERSION=1.38 \ -p 22300:3000 \ --restart always \ --name runner- SSH \ drone/drone- SSHCopy the code

Here you need to set DOCKER_API_VERSION, which is the version of the Docker API to use. The default is the highest version supported by drone, but if the docker version of the machine is lower, Drone will prompt that docker API cannot be higher than xx version. Here, it is good to set DOCKER_API_VERSION when starting runner.

Configuration drone

The detailed configuration can be found in the open source project code. Here’s a look at one of the front-end projects you configured earlier. The general process is to build locally, package the image after build, and upload it to aliyun image warehouse. Then pull the latest image from the server and restart the Docker. For reference only:

kind: pipeline
name: build

steps:
  - name: npm install
    image: node:12-buster-slim
    commands:
      - npm install -g cnpm --registry=https://registry.npm.taobao.org
      - cnpm install
      - cnpm i @nuxtjs/axios
      - cnpm i @nuxtjs/toast
      - cnpm i @nuxtjs/proxy

  - name: npm build
    image: node:12-buster-slim
    commands:
      - npm run build

  - name: docker
    image: plugins/docker
    settings:
      username: yasinshaw
      password:
        from_secret: docker_password
      repo: registry.cn-hangzhou.aliyuncs.com/yasinshaw/yasinshaw-portal
      registry: registry.cn-hangzhou.aliyuncs.com
      mirror: https://mzayqkhl.mirror.aliyuncs.com
      tags: latest

---
kind: pipeline
type: ssh
name: deploy

server:
  host: yasinshaw.com
  user: root
  ssh_key:
    from_secret: ssh_key

steps:
  - name: pull image
    environment:
      DOCKER_PASSWORD:
        from_secret: docker_password
    commands:
      - docker login --username=yasinshaw --password=$DOCKER_PASSWORD registry.cn-hangzhou.aliyuncs.com
      - docker pull registry.cn-hangzhou.aliyuncs.com/yasinshaw/yasinshaw-portal:latest

  - name: remove old container
    failure: ignore
    commands:
      - docker rm -f -v portal

  - name: start container
    commands:
      - docker run -d --name=portal --restart=always -p 3000: 3000 registry.cn-hangzhou.aliyuncs.com/yasinshaw/yasinshaw-portal:latest
depends_on:
  - build
Copy the code

Secret here needs to be configured on the interface of drone. For details, please refer to the official documentation: docs.drone. IO /secret/

At this point, a simple CI/CD process based on Docker is completed, and the next step is to create a project and start development

About the author

I’m Yasin, a tech blogger

Wechat public number: made up a process

Personal website: Yasinshaw.com

The public number typesetting best, the first time to release, reading experience Max, welcome to pay attention to.

There are learning resources, technical exchange group and big factory push oh