Install and configure Nginx on Ubuntu 20.04

Since the tutorials on the Internet are quite messy when learning configuration, it took a long time to complete some basic configurations. Record the process to facilitate the learning of Xiaobai like me.

This article was written on February 10, 2023. If the interval is too long, the following content may become invalid. Please find another tutorial

Contains only basic tutorials, personal services do not involve load balancing

install nginx
Configure static server
Configure port forwarding
Configure domain name
Configure https

Server: Alibaba Cloud ubuntu20.04

nginx version: nginx/1.18.0 (Ubuntu)

1. Install nginx

1.1 Installation and common commands

# 更新apt-get源
sudo apt-get update
# 安装
sudo apt-get install nginx
# 安装后将自动开启nginx服务，打开浏览器输入ip即可查看初始页面

# 查看安装版本
nginx -v
# 输出:nginx version: nginx/1.18.0 (Ubuntu)

# systemctl命令
# 查看状态
sudo systemctl status nginx
# 启动
sudo systemctl start nginx
# 停止
sudo systemctl stop nginx
# 重启
sudo systemctl restart nginx

Note: After modifying the nginx configuration file, restart the nginx service and load the modified configuration file

1.2 File structure

# 查看文件结构
tree /etc/nginx

/etc/nginx
├── conf.d
├── fastcgi.conf
├── fastcgi_params
├── koi-utf
├── koi-win
├── mime.types
├── modules-available
├── modules-enabled
│   ├── 50-mod-http-image-filter.conf -> /usr/share/nginx/modules-available/mod-http-image-filter.conf
│   ├── 50-mod-http-xslt-filter.conf -> /usr/share/nginx/modules-available/mod-http-xslt-filter.conf
│   ├── 50-mod-mail.conf -> /usr/share/nginx/modules-available/mod-mail.conf
│   └── 50-mod-stream.conf -> /usr/share/nginx/modules-available/mod-stream.conf
├── nginx.conf
├── proxy_params
├── scgi_params
├── sites-available
│   └── default
├── sites-enabled
│   └── default -> /etc/nginx/sites-available/default
├── snippets
│   ├── fastcgi-php.conf
│   └── snakeoil.conf
├── uwsgi_params
└── win-utf

1.3 Configuration file content

nginx.conf (I removed all commented code in the initial content for easier viewing)

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
}

http {

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	gzip on;

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

The most important thing is the introduction of the following two lines. I haven’t studied the meaning of the above code yet. I’ll talk about it when I use it.

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

The meaning of these two lines is: load all files with suffix conf from conf.d, load all files from sites-enabled, all as configuration files

I am not used to the sites-enabled file, so I commented out this line and used conf.d as the configuration file

Add in conf.dstatic.conf

server {
    listen       80;
    server_name  localhost;

    charset utf-8; # 防止中文显示出现乱码

    #access_log  logs/host.access.log  main;

    location / {
        root   /var/www/html; # 你的静态资源路径
        index  index.html index.htm;# 访问的文件为html, htm
    }
}

It should be noted that in /var/www/htmlthe directory, the name of the file is not index.htmlthe original name index.nginx.debian.html, just change it to the former.

Through three modifications, complete the migration from sites-enabletoconf.d

nginx.confcomment out ininclude /etc/nginx/sites-enabled/*;
Create conf.da new directory static.confand add the content of the above file
Modify /var/www/htmlthe file name in the directoryindex.html

# 检查配置文件是否有误
nginx -t
# nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
# nginx: configuration file /etc/nginx/nginx.conf test is successful

# 重启服务
sudo systemctl restart nginx

2. Configure static server

Find a web page for testing by yourself and upload it to/var/www/html

I uploaded a markdown online editor I wrote before, which is a folder namedmarkdown

start modifying static.confthe file

server {
    listen       80;
    server_name  localhost;

    charset utf-8; # 防止中文显示出现乱码

    # 根据自己需要配置日志文件，可以单独配置，也可以全部放在/var/log/nginx的日志中
    #access_log  logs/host.access.log  main;

    location / {
        root   /var/www/html; # 你的静态资源路径
        index  index.html index.htm;# 访问的文件为html, htm
    }
    
    location /markdown {
        alias   /var/www/html/markdown; # 你的静态资源路径
        index  index.html index.htm;# 访问的文件为html, htm
    }
    
    # 后续如果有其他配置，模仿markdown的配置添加即可
    # location /example {
    #     alias   /var/www/html/example; # 你的静态资源路径
    #     index  index.html index.htm;# 访问的文件为html, htm
    # }
}

For configuration with multiple paths: [1]

Using root will append the markdown after the location to the end of the path, and you will visit /var/www/html/markdown/markdown when visiting
If alias is used , the markdown after location will not be appended to the end of the path, and it will be the correct path /var/www/html/markdown when visiting

If charset utf-8;there are still garbled characters after adding, force refresh and try

Enter IP/markdownto view configuration results

3. Configure port forwarding

Find a service for testing by yourself, just open it on a port other than 80, I opened it on port 8822

Note: To configure in the security group of the server, open the corresponding port

First test whether IP:8822 can be used normally, you can use it to indicate that the service is successfully started on port 8822, and perform subsequent configurations.

server {
    listen       80;
    server_name  localhost;
 
    charset utf-8; # 防止中文显示出现乱码

	# 添加头部信息
    proxy_set_header  Cookie $http_cookie;
    proxy_set_header  X-Forwarded-Host $Host;
    proxy_set_header  proxy_set_Server  $Host;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
	
    # 访问IP/eat，则会自动访问对应地址IP:8822
    location /eat/ {
        proxy_pass http://localhost:8822/;
    }
    
    # 后续如果有其他配置，模仿eat的配置添加即可
    # 访问IP/example，则会自动访问对应地址IP:port
    # location /example/ {
    #     proxy_pass http://localhost:port/;
    # }
}

Enter IP/eatto view configuration results

4. Configure the domain name

I purchased the domain name southyang.cn from Alibaba Cloud, and resolved the subdomain name demo.southyang.cn to the server

Take port forwarding as an example:

server {
    listen       80;
    server_name  demo.southyang.cn;
 
    charset utf-8; # 防止中文显示出现乱码

	# 添加头部信息
    proxy_set_header  Cookie $http_cookie;
    proxy_set_header  X-Forwarded-Host $Host;
    proxy_set_header  proxy_set_Server  $Host;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
	
    # 访问demo.southyang.cn/eat，则会自动访问对应地址IP:8822
    location /eat/ {
        proxy_pass http://localhost:8822/;
    }
    
    # 后续如果有其他配置，模仿eat的配置添加即可
    # 访问IP/example，则会自动访问对应地址IP:port
    # location /example/ {
    #     proxy_pass http://localhost:port/;
    # }
}

Enter demo.southyang.cn/eatto view configuration results

5. Configure https

Take port forwarding as an example: [2]

server {
    listen 80;
    server_name demo.southyang.cn;
    # 跳转https
    return 301 https://$host$request_uri;
}

server {
    listen 443   ssl http2;
    server_name  demo.southyang.cn;
 
    charset utf-8; # 防止中文显示出现乱码

	# 添加头部信息
    proxy_set_header  Cookie $http_cookie;
    proxy_set_header  X-Forwarded-Host $Host;
    proxy_set_header  proxy_set_Server  $Host;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # 配置证书
    ssl_certificate 证书密钥地址
    ssl_certificate_key 证书公钥地址
    ssl_verify_client off;
    proxy_ssl_verify off;
	
    # 访问demo.southyang.cn/eat，则会自动访问对应地址IP:8822
    location /eat/ {
        proxy_pass http://localhost:8822/;
        proxy_redirect off;
    }
    
    # 后续如果有其他配置，模仿eat的配置添加即可
    # 访问IP/example，则会自动访问对应地址IP:port
    # location /example/ {
    #     proxy_pass http://localhost:port/;
    # }
}

Enter demo.southyang.cn/eatto view configuration results

Note: At present, I only use the content listed above, and I will learn the other content when I use it

Quote content:

[1] https://blog.csdn.net/qq_39827677/article/details/113745095

[2] https://github.com/Mereithhh/van-nav