如何使用create-react-app在本地设置HTTPS
Running HTTPS in development is helpful when you need to consume an API that is also serving requests via HTTPS.
当您需要使用同时通过HTTPS服务请求的API时，在开发中运行HTTPS会很有帮助。
In this article, we will be setting up HTTPS in development for our create-react-app with our own SSL certificate.
在本文中，我们将使用自己的SSL证书在我们的create-react-app开发中设置HTTPS。
This guide is for macOS users and requires that you have brew installed.
本指南适用于macOS用户，要求您已安装brew 。
添加HTTPS (Adding HTTPS)
In your package.json, update the start script to include https:
在package.json ，将启动脚本更新为包含https：
"scripts": {"start": "HTTPS=true react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},Running yarn start after this step will show you this screen in your browser:
在此步骤之后yarn start运行yarn start将会在浏览器中显示以下屏幕：
At this stage, you're already set to go with https. But you don't have a valid certificate, so your connection is assumed to be insecure.
在此阶段，您已经设置为使用https 。 但是您没有有效的证书，因此假定您的连接不安全。
创建一个SSL证书 (Creating a SSL Certificate)
The easiest way to obtain a certificate is via mkcert.
获得证书的最简单方法是通过mkcert 。
# Install mkcert tool
brew install mkcert# Install nss (only needed if you use Firefox)
brew install nss# Setup mkcert on your machine (creates a CA)
mkcert -installAfter running the above commands, you'll have created a certificate authority on your machine which enables you to generate certificates for all of your future projects.
运行上述命令后，您将在计算机上创建一个证书颁发机构 ，使您可以为以后的所有项目生成证书。
From the root of your create-react-app project, you should now run:
现在，应从create-react-app项目的根目录运行：
# Create .cert directory if it doesn't exist
mkdir -p .cert# Generate the certificate (ran from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"We'll be storing our generated certificates in the .cert directory. These should not be committed to version control, so you should update your .gitignore to include the .cert directory.
我们将生成的证书存储在.cert目录中。 这些不应提交给版本控制，因此您应更新.gitignore以包括.cert目录。
Next, we need to update the start script again to include our newly created certificate:
接下来，我们需要再次更新start脚本以包括我们新创建的证书：
"scripts": {"start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},When you run yarn start again, you should now see that your connection is secure.
再次运行yarn start时，现在应该看到连接是安全的。
Don't be a stranger! Feel free to write if you have any questions - connect with me on Linkedin or follow me on Twitter.
不要成为陌生人！ 如有任何疑问，请随时写信- 在Linkedin上与我联系，或在Twitter上关注我 。
翻译自: https://www.freecodecamp.org/news/how-to-set-up-https-locally-with-create-react-app/
相关文章：
Swift强制解析
IDE:Xcode Version7.3.1 Swift中"数据类型?"表示这是可选类型，即 某个常量或者变量可能是一个类型，也可能什么都没有，不确定它是否有值，也许会是nil。 比如： let num1 “123” let num2 Int(number1) pri…
rfc6455 WebSockets
https://tools.ietf.org/html/rfc6455 转载于:https://www.cnblogs.com/cheungxiongwei/p/8385719.html
2020-mb面试指南_2020年最佳代码面试准备平台
2020-mb面试指南Software developer interviews are rapidly evolving. Years ago, mastering data structures and common algorithms was enough to ace an interview and get a job. Today though, employers want candidates with real-world experience and skills. 软件开…
设计模式学习笔记(一)之工厂模式、单例模式
一、工厂模式 (1)简单工厂模式： 1 public interface IProduct { 2 3 public void saleProduct(); 4 5 } 创建一个产品接口，有一个卖产品的方法。 1 public class ProductA implements IProduct{ 2 3 public void saleProduct(){ 4 Sy…
iOS使用支付宝支付步骤
开发平台 (http://open.alipay.com/index.htm(这个里面找不到sdk) 需要进入下面的链接） 使用支付宝进行一个完整的支付功能，大致有以下步骤： 1>先与支付宝签约，获得商户ID（partner）和账号ID（…
heroku_了解如何使用Heroku部署全栈Web应用程序
herokuBuilding a full stack web app is no mean feat. Learning to deploy one to production so that you can share it with the world can add an additional layer of complexity.构建全栈式Web应用程序绝非易事。 学习将其部署到生产环境中，以便您可以与世界…
SpringMVC学习手册(三)------EL和JSTL(上)
1.含义 EL: Expression Language , 表达式语言JSTL: Java Server Pages Standard Tag Library, JSP标准标签库 2.测试项目构建 2.1 复制JSTL的标准实现 复制Tomcat中webapps\examples\WEB-INF\lib下的两个jar包到新建项目目录的WEB-INF\lib下2.2 在JSP文件中使用tagli…
OpenStack Heat模板详解
Heat模板全称为heat orchestration template，简称为HOT。 1 典型Heat模板结构 heat_template_version: 2015-04-30 description:# a description of the template parameter_groups:# a declaration of input parameter groups and order parameters:# declaration …
如何从头开始构建自己的Linux Dotfiles Manager
As a new linux 🐧 user, you might realize that there are a bunch of configuration files present in your system. These special files are called "dotfiles". 作为新的Linux用户，您可能会意识到系统中存在大量配置文件。 这些特殊文件…
D3.js、HTML5、canvas 开发专题
https://www.smartdraw.com/genogram/ http://www.mamicode.com/info-detail-1163777.html D3折线图 https://www.cnblogs.com/hwaggLee/p/5073885.html js-d3画图插件 http://www.xiaomlove.com/2014/06/29/d3-js简单画图-箭头连接随机圆圈/ 连线 http://www.decemberc…
单向链表JAVA代码
//单向链表类publicclassLinkList{ //结点类 publicclassNode{ publicObject data; publicNode next; publicNode(Object obj,Node next){ this.data obj; this.next next; } } Node head; //记录…
forkjoin rxjs_如何通过吃披萨来理解RxJS运算符：zip，forkJoin和Combine
forkjoin rxjs什么是RxJS？ (What is RxJS?) Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change - Wikipedia响应式编程是一种与数据流和变更传播有关的异步编程范式 -Wikipedia RxJS is a…
SQLserver数据库操作帮助类SqlHelper
1 SqlHelper源码 using System; using System.Data; using System.Xml; using System.Data.SqlClient; using System.Collections; namespace SQL.Access {/// <summary>/// SqlServer数据访问帮助类/// </summary>public sealed class SqlHelper{#region 私有构造…
python框架之Flask基础篇（一）
一.第一个hello world程序 # codingutf-8 from flask import Flaskapp Flask(__name__)app.route(/) def hello_world():return Hello World!if __name__ __main__:app.run(debugTrue) 1.app参数的设置： 以下几种方式全部拿debug模式举例： .方式一&…
flask部署机器学习_如何开发端到端机器学习项目并使用Flask将其部署到Heroku
flask部署机器学习Theres one question I always get asked regarding Data Science:关于数据科学，我经常被问到一个问题： What is the best way to master Data Science? What will get me hired?掌握数据科学的最佳方法是什么？ 什么会雇…
UVALive2678:Subsequence
UVALive2678:Subsequence 题目大意 给定一个数组A和一个整数S。求数组A中，连续且之和不小于S的连续子序列长度最小值。 要求复杂度:Ο(n) Solution 用变量L表示所选区间最左端下标，用变量R表示所选区间最右端下标，用变量sum表示所选区间的和。…
【BZOJ-3712】Fiolki LCA + 倍增 （idea题）
3712: [PA2014]Fiolki Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 303 Solved: 67[Submit][Status][Discuss]Description 化学家吉丽想要配置一种神奇的药水来拯救世界。吉丽有n种不同的液体物质，和n个药瓶（均从1到n编号）。初始时&am…
访问系统相册或调用摄像头
头文件：#import <MobileCoreServices/MobileCoreServices.h> 协议：<UINavigationControllerDelegate, UIImagePickerControllerDelegate> // 调用系统相册获取图片 - (IBAction)getImageFromAlbum:(id)sender {// 判断系统相册是否可用&…
unity镜像_通过镜像学习Unity Multiplayer Basics
unity镜像Unity is one of the most well-known and established engines for game development, and Mirror is a third-party, open source networking solution that allows you to add multiplayer to your games.Unity是最著名的游戏开发引擎之一，而Mirror是第…
java内存模型和线程安全
转载于:https://www.cnblogs.com/Michael2397/p/8397451.html
测试，发布，质量保障，用户体验
1.在实际项目中何时开始设计用户体验：用户的第一印象；从用户的角度考虑问题；软件啊服务始终要记住用户的选择；短期刺激和长期影响 2.测试经验交流：基本名词解释及分类；按测试设计的方法分类；按测…
UIImage存为本地文件与UIImage转换为NSData
UIImage *image"XXX"; //png格式 NSData *imagedataUIImagePNGRepresentation(image); //JEPG格式 //NSData *imagedataUIImageJEPGRepresentation(image); NSArray*pathsNSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES); NSString …
如何在JavaScript中实现链接列表
If you are learning data structures, a linked list is one data structure you should know. If you do not really understand it or how it is implemented in JavaScript, this article is here to help you. 如果您正在学习数据结构，则链表是您应该知道的一种…
SVG.path_不连续的线段
1、之前 用<path/>画的 线段等 都是连续的，想知道 是否能画 不连续的线段等 结论：可以 2、测试代码： <?xml version"1.0" encoding"UTF-8"?> <svg width"1000" height"800" viewBo…
Leetcode 之Binary Tree Postorder Traversal（44）
后序遍历，比先序和中序都要复杂。访问一个结点前，需要先判断其右孩子是否被访问过。如果是，则可以访问该结点；否则，需要先处理右子树。 vector<int> postorderTraversal(TreeNode *root){vector<int> resu…
如何创建自己的ESLint配置包
ESLint is a powerful tool that helps you enforce consistent coding conventions and ensure quality in your JavaScript codebase. ESLint是一个功能强大的工具，可帮助您实施一致的编码约定并确保JavaScript代码库的质量。 Coding conventions are sometimes …
MySQL更新命令_UPDATE
创建测试表 mysql> CREATE TABLE product (-> proID int(11) NOT NULL AUTO_INCREMENT COMMENT 商品表主键,-> price decimal(10,2) NOT NULL COMMENT 商品价格,-> type int(11) NOT NULL COMMENT 商品类别(0生鲜,1食品,2生活),-> dtime datetime N…
KVC与KVO
1、键值编码KVC常用的KVC操作方法如下：• 动态设置： setValue:属性值 forKey:属性名（用于简单路径）、setValue:属性值 forKeyPath:属性路径（用于复合路径，例如Person有一个Account类型的属性，…
javaScript 工作必知(三) String .的方法从何而来？
String 我们知道javascript 包括：number，string，boolean,null,undefined 基本类型和Object 类型。 在我的认知中，方法属性应该是对象才可以具有的。 var str"hello,world";var sstr.subString(1,4);//ellalert(typeof…
s3 aws_您需要了解的有关AWS S3的所有信息
s3 awsThis article will provide an in-depth introduction to AWS S3 — the secure, scalable, and super cheap storage service from Amazon Web Services.本文将深入介绍AWS S3-来自Amazon Web Services的安全，可扩展和超便宜的存储服务。 If you have eve…