Cài đặt môi trường lập trình web trên MacOS (4): https, ssl certificate

Thông thường, các project code trên local không cần quan tâm về https hay ssl. Nhưng nếu vì nhiều lý do, bạn muốn setup trên local thì bạn đến đúng nơi rồi đấy.

Ta sẽ bắt đầu với domain ảo http://reishou.test. Đây chỉ là ví dụ, các bạn có thể tùy ý domain theo ý muốn. Về domain ảo, có thể xem lại phần 2 của series để nắm rõ chi tiết hơn. Config cơ bản

server {
    listen 80;
    server_name reishou.test;
    index index.php index.html;

    root /Code/reishou/public;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    include php73.conf;
}

alt text

Thêm dòng sau

listen 443 ssl;

vào config file

server {
    listen 80;
    listen 443 ssl;
    server_name reishou.test;
    index index.php index.html;

    root /Code/reishou/public;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    include php73.conf;
}

Mỗi lần thay đổi config thì cần khởi động lại nginx

$ sudo brew services restart nginx

Sau đó truy cập vào https://reishou.test

alt text

Oops! Cái gì xảy ra vậy, lỗi rồi. Vào check lại nginx nào

$ sudo nginx -t

Chậc chậc cái gì đây nhỉ

$ sudo nginx -t
nginx: [emerg] no "ssl_certificate" is defined for the "listen ... ssl" directive in /usr/local/etc/nginx/servers/reishou:1
nginx: configuration file /usr/local/etc/nginx/nginx.conf test failed

Hmm, vậy là không chỉ đơn giản lắng nghe port 443 là xong đâu, cần phải có ssl_certificate nữa. Không có thì ta tự tạo thôi, tạo file openssl.cnf, đặt ở đâu cũng được, ở đây mình thích để trong thư mục nginx để sau này dễ tìm.

$ code /usr/local/etc/nginx/openssl.cnf

Dán nội dung vào thôi

[req]
distinguished_name = req_distinguished_name
x509_extensions = v3_ca
prompt = no
[req_distinguished_name]
CN = reishou.test
[v3_ca]
keyUsage = digitalSignature, keyEncipherment
extendedKeyUsage = serverAuth
subjectAltName = @alternate_names
[alternate_names]
DNS.1 = reishou.test
DNS.2 = *.reishou.test

Nhớ thay reishou.test bằng domain của bạn nhé. Giờ tạo nhẹ cái thư mục để lưu ssl key

$ mkdir /usr/local/etc/nginx/ssl

Generate mấy cái key ra nào

$ openssl req -new -x509 -newkey rsa:2048 -sha256 -days 3650 -nodes -keyout /usr/local/etc/nginx/ssl/reishou.test.key -out /usr/local/etc/nginx/ssl/reishou.test.crt -config /usr/local/etc/nginx/openssl.cnf
File openssl.conf chỉ phục vụ cho mục đích generate key nên nếu muốn làm cho domain khác thì chỉ cần sửa file đó rồi generate thôi, không ảnh hưởng đến các domain cũ.

Sau đó thêm mấy cái key

ssl_certificate ssl/reishou.test.crt;
ssl_certificate_key ssl/reishou.test.key;

vào file config

server {
    listen 80;
    listen 443 ssl;
    server_name reishou.test;
    index index.php index.html;

    ssl_certificate ssl/reishou.test.crt;
    ssl_certificate_key ssl/reishou.test.key;

    root /Code/reishou/public;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    include php73.conf;
}

Khởi động lại nginx rồi vào https://reishou.test

alt text

Click Advanced > Proceed to reishou.test (unsafe). Chạy https được rồi.

alt text

Đến đây thì bạn có thể dừng lại khi đã hoàn thành việc chạy https, nhưng nếu bạn muốn làm triệt để, không muốn hiện cái Not Secure kia cũng như phải thủ công process khi lần đầu vào domain https thì hãy tiếp tục làm cho ssl trở nên hợp lệ

Mở app Keychain Access lên, click SYSTEM

alt text

Vứt nó đấy, quay qua mở Finder > Go > Go to Folder... Dán cái path của ssl /usr/local/etc/nginx/ssl rồi ấn Go. Ở cửa sổ mới mở thì kéo thả file reishou.test.crt vào cửa sổ của Keychain Access

alt text

Nó sẽ yêu cầu mật khẩu để xác thực action. Hãy điền mật khẩu. Sau đó mở item reishou.test vừa thêm vào. Ở phần Trust > When using this cerfiticate, chọn Always Trust

alt text

Tắt cửa sổ này và xác nhận mật khẩu lần nữa. Tắt trình duyệt web và mở lại https://reishou.test

alt text

Thông thường https trên local hầu như không có nhiều ý nghĩa, chủ yếu để tránh những lỗi config sai khác về http và https khi deploy lên server. Còn lại thì việc có dấu xác thực xanh chỉ để... thẩm du tinh thần thôi. Chúc vui và quyết thắng.

Nguồn: https://reishou.wordpress.com/2019/05/29/cai-dat-moi-truong-lap-trinh-web-tren-macos-4-https-ssl-certificate/

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Reishou

6 bài viết.
4 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
13 3
(Ảnh) Query filter là một vấn đề khá quen thuộc cho dù bạn code ngôn ngữ hay nền tảng nào. Các form search dữ liệu nâng cao với field, column cần f...
Reishou viết 3 tháng trước
13 3
White
2 0
Tạo file trait App\Http\Response.php $value) { $thisdata$key] = $value; } } public function setHeaders(array $headers) { foreach ($headers...
Reishou viết 11 tháng trước
2 0
White
1 2
Cài đặt môi trường lập trình web trên macOS khá thú vị. Có rất nhiều cách, nhiều hướng, nhiều stack cài đặt để lựa chọn. Nếu bạn muốn nhanh gọn thì...
Reishou viết 3 tháng trước
1 2
Bài viết liên quan
White
1 0
Với phần 1 và phần 2 thì các bạn có thể cài đặt hầu hết các dự án php thông thường. Tuy nhiên với các dự án hơi đặc thù lại cần một số php extensio...
Reishou viết 3 tháng trước
1 0
White
1 2
Cài đặt môi trường lập trình web trên macOS khá thú vị. Có rất nhiều cách, nhiều hướng, nhiều stack cài đặt để lựa chọn. Nếu bạn muốn nhanh gọn thì...
Reishou viết 3 tháng trước
1 2
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
4 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!