
Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

```nginx
server {
    listen 80;
    server_name your.server.name;

    root /path/to/your/server/name;
    index index.html;

    # For some static files that should return with http-status-code
    location ~* \.(?:manifest|appcache|html?|xml|json|md)$ {
        expires -1;
    }

    # For some necessary static files
    location ~* \.(?:css|js)$ {
        try_files $uri =404;
        expires -1;
        access_log off;
        add_header Cache-Control "public";
    }

    # If you set backend services such as nodejs, you can do local proxy here.
    # For example, the following code will lead http://your.server.name/api/your-api to http://localhost:3000/your-api
    location /api/ {
      proxy_pass http://localhost:3000/;
    }

    # location ~ ^.+\..+$ {
    #   try_files $uri =404;
    # }

    location / {
        try_files $uri $uri/ /index.html;
    }

    # PHP service here.
    # location ~ \.php$ {
    #     include snippets/fastcgi-php.conf;
    #     fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    # }
}
```

For https deployment please refer to [This blog.](https://blog.terminels.com/post/how-to-use-certbot)


Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

Configuration Boilerplate for SPA with Nginx


## What's the Certbot

When we apply for and use Let's Encrypt's free HTTPS certificate, we need a certificate application and management tool. Then certbot is the officially recommended application tool. We use this tool to apply for and manage our certificates.

certbot supports most Linux distributions and is easy to use. We download and install them directly:

My system here is Ubuntu. If it is CentOS or other distributions, the installation method should be similar. I use the official package to install it directly and quickly.

You can read [here] about what HTTPS is (<https://juejin.im/entry/58d7635e5c497d0057fae036>), and you can read [here] (<https://letsencrypt.org/zh-cn/getting-started/>) about what Let's Encrypt is.

```bash
sudo apt update && sudo apt install certbot
```

After the installation is successful, you need to use the sudo command to run it. Let's run it and see:

```bash
sudo certbot -h
```

## Get certificate

After installing the management tools, we need to apply for a certificate. My web server here is NGINX, and I do not have a static directory for the website, so I use this command to apply:

```bash
sudo certbot certonly --standalone -d example.com -d www.example.com -d m.example.com
```

If your website has a static directory, you can change `--standalone` to `--webroot` and add the `-w` parameter to apply, similar to this:

```bash
sudo certbot certonly --webroot -w /var/www/example -d example.com -d www.example.com
```

When you use `--standalone` to apply for a certificate, you need to turn off nginx, because certbot will enable port 443 to verify your domain name information. If nginx is not turned off, the port will be occupied, so we turn off nginx. I am using ubuntu here. So use this command to shut down nginx:

```bash
sudo services nginx stop
```

## Configure certificate

After the certificate application is completed, the certificate will exist in the `/etc/letsencrypt/live/` directory. Let's check that there are no problems and then open the nginx configuration file to modify the certificate loading path:

```bash
cd /etc/nginx/site-enabled/
```

Edit configuration file

```bash
sudo vim example.com.conf
```

With such content,

```nginx
server {
        server_name example.com www.example.com;
        listen 443;
        ssl on;
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

        location / {
           proxy_pass http://127.0.0.1:3999;
           proxy_http_version 1.1;
           proxy_set_header X_FORWARDED_PROTO https;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Host $host;
        }
    }
```

After saving and exiting, use the nginx test command to check whether it work correctly:

```bash
sudo nginx -t
```

If there is no problem, reload it

```bash
sudo service nginx reload
```

Start the nginx

```bash
sudo service nginx start
```

After the startup is successful, you can enter the URL to visit and check whether the certificate activation is successful: `https://example.com` If the certificate is displayed normally, it means success.

## Update certificate

Because the Let's Encrypt certificate is only valid for 90 days, when it expires, we need to refresh the validity period of the certificate before we can continue to use it. Refresh the certificate validity period. Because we are using the `--standalone` mode to install the nginx certificate, we need to refresh the certificate. Sometimes you still need to shut down nginx. Use this command to shut down nginx:

```bash
sudo service nginx stop
```

Then run this command to refresh:

```bash
certbot renew --dry-run
```

Or we can use the system's timer and refresh it when the time is about to end. Let's Encrypt certificate officials say that the certificate expiration time must be less than one month before it can be refreshed. We can configure the refresh time _every_ more than two months That's it. Here we write a cron plan to perform the update operation at 2:15 am every two months.

```bash
15 2 * */2 * root certbot renew --pre-hook "service nginx stop" --post-hook "service nginx start"
```

Then the execution of this command requires the permissions of the root user. We log in as the root user:

```bash
sudo su
```

Then create a file, call it cronfile, and then write this timing plan:

```bash
touch cronfile
```

```bash
echo '15 2 * */2 * root certbot renew --pre-hook "service nginx stop" --post-hook "service nginx start"' > ./cronfile
```

After finishing, run the plan:

```bash
crontab -u root ./cronfile
```

After successful execution, use `-l` to view the plan:

```bash
crontab -l
```

## Finish

Our certificate application ends here, 👏

> This article is reprinted from the blog of [The Universe in the Shell](https://kuokuo.io/2019/08/05/get-lets-encrypt-cert/)


Let's Encrypt makes HTTPS available to everyone for free. In this article, we will introduce how to use the Certbot application tool to configure an SSL certificate for HTTPS of a domain name on a personal server.

Configuring SSL for HTTPS with Certbot + Let's Encrypt + Nginx


## Forward the domain name request to the local port

First, we will introduce the most commonly used ones. When separating front-end and back-end, sometimes we deploy some services locally such as Node.js as API service. On the local port 3300, assuming the host name is example.com, we need to access All HTTP requests on this host are forwarded to the service deployed at localhost:3300. The configuration can be written as follows:

```nginx
server{
  listen 80;
  server_name  api.example.com;
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://localhost:3300; # 转发规则
    proxy_set_header Host $proxy_host; # 修改转发请求头，让8080端口的应用可以受到真实的请求
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when accessing http://api.example.com, it will be forwarded to the local port 3300.

## Forward the domain name request to another domain name

Suppose there is an alternate domain name: backup.example.com. When accessing the host backup.example.com, it is directly forwarded to the main domain name example.com. The configuration file can be written as follows:

```nginx
server{
  listen 80;
  server_name  backup.example.com;
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://example.com;
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when you access http://backup.example.com, it will be forwarded to example.com

## Forward a local port to another port or another domain name

Assume that the HTTP service deployed locally needs to be forwarded to port 3300 or other domain names example.com

```nginx
server{
  listen 80;
  server_name localhost; # 公网ip
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://localhost:3300; # 或 http://example.com
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when accessing http://localhost, it will be forwarded to the local port 3300 or http://example.com

## Note: adding / or not adding / at the end of location

When configuring proxy_pass proxy forwarding, if the following url is added with `/`, it indicates the absolute root path; if there is no /, it indicates the relative path.

For example

1. with `/`

```nginx
server_name example.com
location /data/ {
    proxy_pass http://localhost/;
}
```

Accessing http://example.com/data/index.html will be forwarded to http://localhost/index.html

2. without `/`

```nginx
server_name example.com
location /data/ {
    proxy_pass http://localhost;
}
```

Accessing http://example.com/data/index.html will be forwarded to http://localhost/data/index.html


This article gives three examples of Nginx proxy forwarding: forwarding domain name requests to a local port, forwarding domain name requests to another domain name, and forwarding a local port to another port or another domain name.

NOTE & BLOG

Posts of O&M

Configuration Boilerplate for SPA with Nginx

Configuring SSL for HTTPS with Certbot + Let's Encrypt + Nginx

Some Examples of Nginx Proxy Forwarding