search

atlaschiew / react-study

happy reacting
0 stars 0 forks source link

setup SSL for react dev #1

Open atlaschiew opened 1 year ago

atlaschiew commented 1 year ago

ENVIRONMENT: development on ubuntu browser on window

install mkcert

# login root
$ apt-get update -y
$ cd ~
$ wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-linux-amd64
$ mv mkcert-v1.4.3-linux-amd64 /usr/bin/mkcert
$ chmod +x /usr/bin/mkcert
$ mkcert --version
atlaschiew commented 1 year ago

generate self assign certificate 

# cd to root of project
$ mkdir certification
$ cd certification

# i apply domain below 
$ mkcert react.localhost.com
# response received
# Note: the local CA is not installed in the Firefox and/or Chrome/Chromium trust store.
# Run "mkcert -install" for certificates to be trusted automatically ⚠️

$ mkcert -install
# response received
# The local CA is already installed in the system trust store! 👍
# ERROR: no Firefox and/or Chrome/Chromium security databases found

# find location of CA
$ mkcert -CAROOT
$ cd /root/.local/share/mkcert

# capture and save as rootCA.crt on window. 
$ nano /root/.local/share/mkcert/rootCA.pem
atlaschiew commented 1 year ago

set domain in C:\Windows\System32\drivers\etc\hosts with administrator privilege.

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost

# 192.168.153.129 is my vm ip
192.168.153.129 react.localhost.com

set window chrome to accept a self-signed certificate

navigate to Settings > Privacy and security > Security > Manage devices certificates

image

image

just do import and lastly please restart browser to see your site secured by ssl