Configure https(https://localhost) on the local environment of Windows 10, based on MKCERT

在 Chrome 浏览器中打开网址:https://localhost/phpinfo.php ,访问成功,符合预期。
1. Now the local environment URL: http://morefun.dev.dev.xxx.cn/ I want to get the cookie data under the development environment: https://.xxx.cn, but found that it cannot be obtained. The reason is the difference between HTTP and HTTPS. 2. Configure the URL in the local environment: https://morefun.dev.xxx.cn/ . 3. Reference URL: https://web.dev/how-to-use-local-https/ . How to use HTTPS for local development. Sometimes you need to run a local development site using HTTPS. Tools and tips to do this safely and quickly. as shown in Figure 1
参考网址:https://web.dev/how-to-use-local-https/ 。如何使用HTTPS进行本地开发。有时,您需要使用 HTTPS 运行本地开发站点。安全快速地执行此操作的工具和提示。
Figure 1
4. In special cases, you need to use https locally, such as a custom hostname or a secure cookie across browsers. The current situation is a secure cookie across browsers. If your production website uses HTTPS, you want to develop a site locally to behave like an HTTPS website. 5. Use MKCERT to run your site locally using HTTPS (recommended). If you use HTTPS to open a locally running site in your browser, your browser will check the certificate for the local development server. After you see that the certificate has been signed by the certificate authority generated by MKCERT, the browser will check whether it is registered as a trusted certificate authority. MKCERT is listed as a trusted authority, so your browser trusts the certificate and creates an HTTPS connection. 6. MKCERT is a simple tool for making local trust development certificates. It does not require configuration. Reference URL: https://github.com/FiloSottile/MkCert . On Windows, use pre-built binaries. Download: mkcert-v1.4.3-windows-amd64.exe to the directory: e:/wwwroot. as shown in Figure 2
mkcert 是一个简单的工具,用于制作本地信任的开发证书。 它不需要配置。参考网址:https://github.com/FiloSottile/mkcert 。在 Windows 上,使用预构建的二进制文件。下载:mkcert-v1.4.3-windows-amd64.exe 至目录:E:/wwwroot。
Figure 2
7. Run PowerShell as an administrator, enter the directory: e:/wwwroot, and add mkcert to the local root CA. In your terminal, run the following commands:, click Yes, the local CA is now installed in the system truststore! ⚡ Note: Firefox support is not available on your platform. as shown in Figure 3
以管理员身份运行 PowerShell,进入目录:E:/wwwroot,将 mkcert 添加到本地根 CA。在您的终端中,运行以下命令:,点击 是,本地 CA 现已安装在系统信任库中! ⚡注意:Firefox 支持在您的平台上不可用。
Figure 3


PS E:\wwwroot> ./mkcert-v1.4.3-windows-amd64.exe install
Note: the local CA is not installed in the system trust store.
Run "mkcert -install" for certificates to be trusted automatically ⚠️

Created a new certificate valid for the following names 📜
 - "install"

The certificate is at "./install.pem" and the key at "./install-key.pem" ✅

It will expire on 2 December 2023 �
PS E:\wwwroot> ./mkcert-v1.4.3-windows-amd64.exe -install
The local CA is now installed in the system trust store! ⚡️
Note: Firefox support is not available on your platform. ℹ️

PS E:\wwwroot>�


8. Generate a certificate signed by MKCERT for your site. Navigate to the root directory of the site (https://localhost). as shown in Figure 4
为您的站点生成一个由 mkcert 签名的证书。导航到站点(https://localhost)的根目录。
Figure 4


PS E:\wwwroot> ./mkcert-v1.4.3-windows-amd64.exe localhost

Created a new certificate valid for the following names 📜
 - "localhost"

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

It will expire on 2 December 2023 🗓

PS E:\wwwroot>


9. Add support for certificates in the Nginx configuration file of the local environment. Cut the file to: c:/nginx-1.10.1/conf/localhost.pem, c:/nginx-1.10.1/conf/localhost-key.pem. Edit c:/nginx-1.10.1/conf/nginx.conf. Add 3 lines starting with SSL. The listening port is modified to 443. as shown in Figure 5
在本地环境的 Nginx 配置文件中添加对于证书的支持。剪切文件至:C:/nginx-1.10.1/conf/localhost.pem、C:/nginx-1.10.1/conf/localhost-key.pem。编辑 C:/nginx-1.10.1/conf/nginx.conf。添加以 ssl 开头的 3 行。监听端口修改为 443。
Figure 5


    server {
        listen 443;
        server_name  localhost;

		client_max_body_size 200m;
		client_body_buffer_size 1024k;

		fastcgi_read_timeout 180s;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

		ssl on;
		ssl_certificate localhost.pem;
		ssl_certificate_key localhost-key.pem;

        location / {
            root   E:/wwwroot;
            index  index.html index.htm index.php;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
	    fastcgi_split_path_info ^(.+\.php)(/.+)$;
            root           E:/wwwroot;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


10. Open the URL in the Chrome browser: https://localhost/phpinfo.php, the access is successful, which is in line with expectations. as shown in Figure 6
在 Chrome 浏览器中打开网址:https://localhost/phpinfo.php ,访问成功,符合预期。
Figure 6
11. Run PowerShell as an administrator, go to the directory: e:/wwwroot, generate one by mkcert for your site (https://morefun.dev.xxx.cn) signed certificate.


PS E:\wwwroot> ./mkcert-v1.4.3-windows-amd64.exe morefun.dev.xxx.cn

Created a new certificate valid for the following names 📜
 - "morefun.dev.xxx.cn"

The certificate is at "./morefun.dev.xxx.cn.pem" and the key at "./morefun.dev.xxx.cn-key.pem" ✅

It will expire on 2 December 2023 🗓



12. Refer to the above steps, copy the certificate file and edit the nginx file. Open the URL: https://morefun.dev.dev.dev.dev.xxx.cn/ , in cookies, you can already get the cookie data under the development environment: https://.xxx.cn . as shown in Figure 7
参考以上的步骤,复制证书文件,编辑 Nginx 文件。打开网址:https://morefun.dev.xxx.cn/ ,在 Cookies 中,已经能够获取到开发环境网址:https://.xxx.cn 下的 Cookie 数据 。
Figure 7

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.