Web Server

2023/5/29 Web組

Before we start

• Download Ubuntu Server 22.04 LTS iso
• https://ftp.ubuntu-tw.org/ubuntu-releases/22.04.2/ubuntu-22.04.2-live-server-amd64.iso
• You may use any OS you like.
• However, in the following lab we will explain on Ubuntu Server 22.04 LTS.

HTTP Request

• HTTP method (verb of a request)
• URL (specify the content)
• Protocol
• Host address / domain (with port)
• Path to the resource
• Additional parameters
• Example:

​

GET http://www.csie.ntu.edu.tw/members/teacher.php?mclass=110

HTTP Response

• Status code
• Body - requested data

Web Server

• handle http request & make response
• mapping
• multi-hosting
• Proxy/Reverse Proxy
• load balance

​

Client-Server model

Browser

​

• request
• rendering
• HTML
• CSS
• Javascript

Web Server

​

• Apache
• Nginx

​

Backend Script / Framework

​

• PHP
• Django
• Ruby on Rails
• Express

​

Database

​

• MySQL
• PostgreSQL

Web Server Comparison

LAB

• Run WordPress by LEMP
• Linux + Nginx + MariaDB + PHP

​

Linux VM

Your PC

(Client)

Web Server

Nginx

Dynamic Content PHP

Database

MariaDB

Set up a VM

• Create a Ubuntu Server VM
• Username: Student ID, eg: b09902007. The user should be in sudo group
• Hostname: nasalab
• Networking
• Set up as “bridged networking”
• Make sure you can ping your VM from your host
• $ ip a # get the address of vm
• $ ping <vm’s address>

Firewall Configuration

• What do you see when visiting VM’s webpage from the host?
• Enable 80 port for Apache:
• $ sudo firewall-cmd --list-all
• $ sudo firewall-cmd --add-service=http --permanent
• $ sudo firewall-cmd --reload

Install Nginx + MariaDB + php

$ sudo apt install nginx mariadb-server php8.1-fpm php-mysql

​

php-mysql 是 php 的 mysql 模組，需要這個才能連線、執行 SQL 查詢

​

Testing Nginx

$ curl localhost

What do you see?

​

​

Nginx Server Installation

• $ sudo apt update
• $ sudo apt install nginx
• $ sudo systemctl status/start nginx
• Testing:
• $ curl localhost
• What do you see?

Nginx Directory Structure

• Ubuntu/nginx: /etc/nginx
• nginx.conf # nginx general config
• conf.d # general config folder
• modules-available/ # module file
• modules-enabled/ # ln to enable module
• sites-available/ # config for sites
• sites-enabled/ # ln to enable site configs
• snippiets/ # 安裝時附送可能會用到的設定

Nginx Config - nginx.conf

• user www-data # the user for nginx
• include # import other configuration files
• access_log # location of error log
• error_log # location of error log
• gzip # compress the served content

Configure Nginx

$ cd /etc/nginx

$ sudo cp sites-available/default sites-available/wordpress.conf

$ sudo unlink sites-enabled/default

​

$ sudo nano sites-available/wordpress

Configure Nginx

server {

listen 80 default_server;

root /var/www/wordpress;

​

index index.html index.htm index.php;

​

location / {

try_files $uri $uri/ =404;

}

​

location ~ \.php$ {

include snippets/fastcgi-php.conf;

fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;

}

​

}

Configure Nginx

$ sudo ln -s ../sites-available/wordpress sites-enabled/wordpress

$ sudo mkdir -p /var/www/wordpress

​

# 測試 nginx configuration 有沒有錯

$ sudo nginx -t

​

# 重新載入 nginx

$ sudo systemctl reload nginx

​

Configure Nginx - Testing Nginx with PHP

建立一個檔案測試 /var/www/wordpress/info.php，記得要刪掉（理由）

<?php

phpinfo();

?>

Configure MariaDB

基本上是認真讀

然後接受它的建議就好了

測試可以登入 mysql

$ sudo mysql

​

$ sudo mysql_secure_installation

Change the root password? [Y/n] n

Remove anonymous users? [Y/n] Y

Disallow root login remotely? [Y/n] Y

Remove test database and access to it? [Y/n] Y

Reload privilege tables now? [Y/n] Y

Check your Apache

• Connect to <vm ip> from you host computer browser
• You should see a page like this

If you don’t see the page:

• Check httpd status
• Check network connection
• Check firewall

PHP Installation

• $ sudo apt install php php-mysql
• $ php -v # check your php version
• $ httpd -M
• $ sudo systemctl reload httpd

​

You may now put `info.php` in /var/www/html/info.php and browse {client ip}/info.php to check if php is installed correctly

​

`info.php` content:

<?php

phpinfo();

MySQL Installation

• $ sudo apt install mariadb-server
• $ sudo systemctl status/start mariadb
• $ sudo mysql_secure_installation

=== Mysql Installation Process ===

• > Change the root password? [Y/n] n
• > Remove anonymous users? [Y/n] y
• > Disallow root login remotely? [Y/n] y
• > Remove test database and access to it? [Y/n] y
• > Reload privilege tables now? [Y/n] y

Download and Configure WordPress

$ cd /tmp

$ wget https://wordpress.org/latest.tar.gz

$ tar xzvf latest.tar.gz

$ cp /tmp/wordpress/wp-config-sample.php /tmp/wordpress/wp-config.php

$ sudo cp -a /tmp/wordpress/. /var/www/wordpress

$ sudo chown -R www-data:www-data /var/www/wordpress

​

透過 Wordpress API 取得安全的 secret key，複製到 wp-config 中

$ wget -O - https://api.wordpress.org/secret-key/1.1/salt/

$ sudo nano /var/www/wordpress/wp-config.php

​

​

Configure WordPress - 設定 mariadb 帳號

$ sudo mysql

CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY '{password}';

GRANT ALL ON wordpress.* TO 'wordpressuser'@'localhost';

Configure WordPress - 設定 mariadb 帳號

設定 DB_NAME, DB_USER, DB_PASSWORD。供 Wordpress 連線到 maria-db 使用。之後新增一行定義 FS_METHOD 為 direct。因為我們已經授予 Web 服務器寫入 /var/www/wordpress 的權限。編輯 /var/www/wordpress/wp-config.php 檔案

define( 'DB_NAME', 'wordpress' );

​

/** MySQL database username */

define( 'DB_USER', 'wordpressuser' );

​

/** MySQL database password */

define( 'DB_PASSWORD', 'password' );

​

define( 'FS_METHOD', 'direct' );

​

Configure WordPress - Nginx 改設定

​

​

讓 Wordpress 可以顯示 404 頁面

server {

. . .

location / {

#try_files $uri $uri/ =404;

try_files $uri $uri/ /index.php$is_args$args;

}

. . .

}

​

$ sudo nano /etc/nginx/sites-available/wordpress

Wordpress Installation

• Connect to http://<vm ip> in your host browser

​

Demo (submit via COOL)

• Deadline: 2023/6/11 (Sun.) 23:59
• Submit a PDF file to NTU COOL Lab12 assignment
• Your PDF file should contain
• 2 screenshots
• your wordpress website
• tables from your database
• Name your file to [學號]_lab12.pdf

Thanks for your attention !

​

GL&HF :)

Reference:

How to Install WordPress with LEMP on Ubuntu 22.04

How To Install Linux, Nginx, MySQL, PHP (LEMP stack) on Ubuntu 22.04 | DigitalOcean