Hướng dẫn deploy web application bằng server

Trong bài viết này, Sunteco sẽ hướng dẫn cách để deploy một trang web trên máy chủ ảo chạy Ubuntu 22.04

Quá trình publish web application trên VM gồm các bước

  1. VM đã có public IP

  2. Cài đặt Web server

  3. Build source code

  4. Deploy

  5. Trỏ Domain tới Public IP(optional)

1. Tạo máy chủ (server)

Bài viết này sử dụng server trên Sunteco Cloud, chọn hệ điều hành Ubuntu, xem thêm Hướng dẫn tạo Sun VM trên Sunteco Cloud

2. Cài đặt và cấu hình web server

Bước 1: Kết nối với server theo hướng dẫn

Bước 2: Cài đặt nginx:

  • sudo apt update

  • sudo apt install

  • sudo apt install nginx

Sau khi cài đặt nginx thành công, khi truy cập địa chỉ public_ip của server qua trình duyệt sẽ thấy xuất hiện Welcome Page mặc định của nginx như dưới đây:

Step

Bước 3: Tạo thư mục chứa source code

Để build code lên production, cần một thư mục để chứa source dự án. Tạo thư mục chứa source code của dự án bằng câu lệnh:

$ sudo mkdir -p /var/www/sunteco-tutorial/html

3. Build source code

Vì các ngôn ngữ và web framework khác nhau có cách build khác nhau, nhưng điểm chung là sau khi build sẽ gồm file index.html và các file đóng gói đi kèm(thường là html, js, css, resource).

Để đơn giản nhất ở đây sử dụng một file một file index.html

  • File source ở máy local có định dạng như sau:

Step

  • Test file source bằng một webserver tại local, có thể sử dụng nginx, xampp, apache

Step

  • Copy source code lên server đã tạo từ Sunteco bằng câu lệnh:

$ scp <vị trí chứa source file trên local> <tên user của máy>@<public Ip của máy chủ> <thư mục chứa file source trên server>

Trong đó:
- <vị trí chứa source file trên local> là đường dẫn đến thư mục chứa source file ở local
- <tên user của máy> là tên user của server đã tạo ở bước trước đó
- <thư mục chứa file source trên server> Ví dụ: var/www/sunteco-tutorial/html là thư mục đã tạo trên web server ở Bước 2

Note

<thư mục chứa file source trên server> Thư mục này phụ thuộc vào webserver được cài đặt trên server

Ví dụ của Sunteco trong bài viết này, câu lệnh chính xác sẽ là:

$ scp D:\Learning\sunteco-web-tutorial\index.html [email protected]:/var/www/sunteco-tutorial/html

4. Deploy code lên web server

Bước này có chức năng cấu hình liên kết giữa địa chỉ IP, cấu hình webserver và source file

Bước 1: Kết nối tới server

Bước 2: Tạo site và cấu hình web server- Có thể thay bằng các command khác tương tự

$ sudo vi /etc/nginx/sites-enabled/<thư mục chứa cấu hình cuả site>

Ví dụ command mà Sunteco dùng trong bài viết này là: sudo vi /etc/nginx/sites-enabled/sunteco-tutorial

Sau đó, sử dụng đoạn code sau, thay thế các giá trị tương ứng và lưu file lại:

server {
        listen 80;
        listen [::]:80;

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name <your_ip> <your_domain>;

        location / {
                try_files $uri $uri/ =404;
        }
}

Trong đó

  • root /var/www/your_domain/html; là chỉ dẫn nơi lưu source file

  • index index.html index.htm index.nginx-debian.html; Chỉ dẫn file index khi load trang web

  • server_name <your_ip> <your_domain>; Chỉ dẫn mapping IP với domain nếu sở hữu domain. Lưu ý cấu hình trỏ domain tới IP của máy chủ trên trang quản lý domain của Nhà cung cấp tên miền.

Với server có public ip là 103.172.236.85:

Step

Bước 4: Kiểm tra lỗi và restart server

Để kiểm tra liệu file cấu hình web server có lỗi hay không, chạy câu lệnh:

$ sudo vi /etc/nginx/sites-enabled/sunteco-tutorial

Nếu cấu hình thành công, output của câu lệnh trên sẽ là:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Restart nginx:

$ sudo service nginx restart

Bước 5: Kiểm tra kết quả

Nếu tất cả các bước trên thành công, khi truy cập địa chỉ Public IP hoặc Domain sẽ trả về đúng những gì mà source code ở máy local đã hiển thị:

Step