Tạo https, port 80 cho Live Server trên VS Code
White

Mòe viết ngày 23/08/2021

Set localhost chạy ở port 80

Bước 1: Tìm settings.json của VS Code

Vào VS Code, gõ F1, nhập settings.json vào thanh tìm kiếm, chọn cái Preferences: Open Settings (JSON)
alt text

Bước 2: Set port 80

thêm thuộc tính sau vào object setting trong file setting

"liveServer.settings.port": 80

alt text

Set https cho localhost

Bước 1: Download OpenSSL Toolkit

http://gnuwin32.sourceforge.net/packages/openssl.htm
Down xong, cài đặt

Bước 2: Tạo private key

Chú ý: Nếu dùng Windows thì các lệnh openssl phải có winpty ở đầu, nếu không sẽ bị treo khi nhập lệnh

Gõ lệnh tạo private key

winpty openssl genrsa -des3 -out server.key 1024

Nhập pass phrase ít nhất 4 kí tự và nhập lại để verify

alt text

Bước 3: Tạo request lấy chứng chỉ

Gõ lệnh tạo chứng chỉ

 winpty openssl req -new -key server.key -out server.csr

Nhập lại pass phrase khi được hỏi
alt text

Điền tiếp thông tin về địa điểm khi được hỏi.

Bước 4: Tạo chứng chỉ

winpty openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Bước 5: KIểm tra những gì file đã được tạo

Lúc này trong thư mục mà nãy giờ bạn gõ lệnh, đã xuất hiện các file

  • server,crt
  • server.csr
  • server.key

Bước 6: Set https cho VS Code

Copy đoạn sau vào object trong settings.json, trong đó:

  • crt: đường dẫn tới file server.crt, đã có escape kí tự đặc biệt, VD: C:\\Users\\Admin\\server.crt
  • key: đường dẫn tới file server.key
  • pass phrase: nhập pass phrase ban nãy

"liveServer.settings.https": {
        "enable": true, 
        "cert": "", //full path of the certificate
        "key": "", //full path of the private key
        "passphrase": ""
        }

alt text

Bước 7: Mở thử Live Server xem kết quả

Cho dù vẫn bị báo invalid cert nhưng live server của chúng ta lúc này đã có https và đã có thể thỏa mãn yêu cầu của một số API.

alt text

Bài tham khảo:

https://www.akadia.com/services/ssh_test_certificate.html
https://stackoverflow.com/questions/9450120/openssl-hangs-and-does-not-exit
https://webisora.com/how-to-enable-https-on-live-server-visual-studio-code/

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

Mòe

8 bài viết.
360 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
132 45
Google cách học tốt Tiếng Anh thì ra hàng đống kết quả nhưng bạn mãi không dùng được cái nào. Vậy thay vì tìm cách học tốt hãy đọc thử những cách h...
Mòe viết hơn 3 năm trước
132 45
White
44 10
(Ảnh) Dùng CSS để "sửa" nội dung HTML Ngoài nguyên nhân là muốn chơi nổi thì lí do phải dùng code CSS để tác động vào HTML là khi bạn không được...
Mòe viết gần 3 năm trước
44 10
White
36 16
Các khái niệm riêng của Wordpress dễ gây nhầm lẫn Ai muốn làm theme động luôn và không muốn hiểu lý thuyết có thể bỏ qua phần này. Ngay ở documen...
Mòe viết hơn 2 năm trước
36 16
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
360 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á!