วิธีติดตั้ง SSL ให้ React สำหรับ webpack server ใช้กับ node js , npm , yarn สามารถตั้งค่าได้ดังนี้

สำหรับท่านที่ต้องการเปิดใช้งาน SSL Certificate และ HTTPS ให้กับ React JS 
 

1. ทำการอัพโหลดไฟล์ ssl ใส่ในโฟลเดอร์

• cd โฟลเดอร์โปรเจ็ค
• mkdir ssl
• ทำการรวมไฟล์ ไว้ในไฟล์เดียวกัน

  cat ssl_domain.crt CARootCertificate-ca.crt >  domain_pack.crt

  |- Project Folder
  |--- private.key
  |--- CARootCertificate-ca.crt
  |--- domain.crt
  |--- domain_pack.crt # ได้มากจากการรวม domain.crt + CARootCertificate-ca.crt

2. แก้ไข package.json

รันเซิร์ฟเวอณ์ด้วย Node สำหรับ macOS , Linux สั่ง

"start": "HTTPS=true SSL_CRT_FILE='./ssl/domain_pack.crt' SSL_KEY_FILE='./ssl/private.key' react-scripts start",

รันเซิร์ฟเวอณ์ด้วย Node สำหรับ Windows

"start": "set HTTPS=true &&set SSL_CRT_FILE='./ssl/domain_pack.crt' &&set SSL_KEY_FILE='./ssl/private.key' && react-scripts start",

  รันเซิร์ฟเวอร์ ด้วย webpack-dev-server  

"start": "webpack-dev-server  --open --https --cert ./ssl/domain_pack.crt --key ./ssl/private.key"

3. การตั้งค่า HTTPS ให้กับ webpack / webpack-dev-server

แก้ไข ตั้งค่าไฟล์ webpack.config.js

var fs = require('fs');

module.exports = {

     devServer:{

              https: true,
              host: '0.0.0.0', // you can change this ip with your ip
              port: 443,       // ssl defult port number
              inline: true,
              https: {
                    key: fs.readFileSync('./ssl/private.key'),
                    cert: fs.readFileSync('./ssl/domain.crt'),
                    ca: fs.readFileSync('./ssl/CARootCertificate-ca.crt')
                    }
              historyApiFallback: true,
              publicPath: '/',
              contentBase: './dist',
              disableHostCheck: true
    }

}

สั้งรัน React

• npm start หรือ  pm2 start npm -- start
• หรือ yarn start

กรณีติดตั้งใน express server 

เช่นในไฟล์ https_server.js

var https = require('https');
var fs = require('fs');

var https_options = {
    cert: fs.readFileSync("./ssl/to/your_domain_name.crt"),
    key: fs.readFileSync("./ssl/private.key"),
    ca: fs.readFileSync('./ssl/CARootCertificate-ca.crt'),
};
https.createServer(options, function(req, res) {
    res.writeHead(200);
    res.end("Welcome to Node.js HTTPS Servern");
}).listen(3000)

ตัวอย่างใช้งานกับ spdy

const fs = require('fs');
const path = require('path');
const express = require('express');
const spdy = require('spdy');

const CERTS_ROOT = '../../ssl/';

const app = express();

app.use(express.static('static'));

const config = {
    cert: fs.readFileSync(path.resolve(CERTS_ROOT, 'domain_pack.crt')),
    key: fs.readFileSync(path.resolve(CERTS_ROOT, 'private.key')),
};

spdy.createServer(config, app).listen(3000, (err) => {
    if (err) {
        console.error('An error occured', error);
        return;
    }

    console.log('Server listening on https://localhost:3000.')
});

หากต้องการเพิ่มใน .env ก็ได้โดยเพิ่ม config

ไฟล์ .env.development หรือ .env สำหรับ production

SSL_CRT_FILE=.ssl/server.crt
SSL_KEY_FILE=.ssl/server.key

คู่มือทางการ ของ React และการทำ https
https://webpack.js.org/configuration/dev-server/#devserverhttps

การติดตั้ง SSL กับ Node , Express Server
https://www.ireallyhost.com/kb/ssl/419

ตัวอย่างเพิ่มเติม
https://marmelab.com/blog/2019/01/23/https-in-development.html
https://bleext.com/post/how-to-enable-https-on-webpack-dev-server
https://stackoverflow.com/questions/26663404/webpack-dev-server-running-on-https-web-sockets-secure
https://blog.bitsrc.io/using-https-for-local-development-for-react-angular-and-node-fdfaf69693cd
https://medium.com/swlh/how-to-make-react-js-use-https-in-development-4ead560eff10
 

ไอเรียลลี่โฮส
สำหรับการสนับสนุน และช่วยเหลือ
http://www.ireallyhost.com/support