Category: React

React 本地開發設置 https

最近為了新增「讀取條碼」&「拍照功能」需要開啟攝影機時、才發現 Chrome 已無法直接啟用；需要 https 才可開啟權限。

好吧！逃避很久的坑總是要補上的。

首先安裝 Mkcert ：

brew install mkcert

接下來要創建證書到自己的專案中：

mkcert -install

然後生成證書：

mkcert localhost 127.0.0.1

它會產出 2 個憑證檔案：

因為我現在改用 Vite 建立專案了、所以要到 vite.config.js 去修改內容。另外也因為我後端 API 還沒升級到 https 、所以我採用了代理的方式(又留一個坑以後踩)、完整修改如下：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import fs from "fs";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
      host: true, // 啟用 IP 訪問
      port: 3000, // 指定 port
    https: {
      key: fs.readFileSync(path.resolve(__dirname, "localhost+2-key.pem")),
      cert: fs.readFileSync(path.resolve(__dirname, "localhost+2.pem")),
    },
    proxy: {
      "/api": {
        // Connect to Server - commURL
        target: "http://127.0.0.1:9090"; // Localhost
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

這樣就可以在本地端開啟攝影機了。

How to Run ReactJs Application in a Docker Container

踩坑了許多、在查閱眾多文件後；以下為目前最終作法(非最佳)、希望之後可以再讓其更好。

  • 在項目的根目錄下新增 Dockerfile 。

http://idea0816.synology.me/wordpress/wp-content/uploads/2022/11/截圖-2022-11-09-下午7.32.20.jpg

  • 原本寫法會使 image 暴增成近 1G 的檔案；經修改為以下的設定後目前僅有 27MB 左右。
# node 版本號(依開發時所使用的環境選擇為 18 、並加上 alpine 為穩定版)
FROM node:18-alpine as builder
# 建立工作目錄(小寫)
WORKDIR /webbyerp
# 添加所有檔案到工作目錄中
ADD . /webbyerp
# RUN npm install && npm run build && npm install -g http-server(用 ci 替代 npm install)
RUN npm ci && npm run build
# PORT(這裡只是給發布的人知道自己原本的 PORT 接口)
EXPOSE 3000
# CMD http-server ./build -p 3000容器啟動後、執行http-server(用 nginx 取代)
FROM nginx:alpine
COPY --from=builder /webbyerp/build /usr/share/nginx/html
  • 建立完成後就來產出 image 檔(先上全圖)。

http://idea0816.synology.me/wordpress/wp-content/uploads/2022/11/截圖-2022-11-09-下午8.03.29.jpg

  • testimage 可替換成自己要的名字。特別注意此指令後面有一個「 . 」、沒加上會出錯。
docker build -t testimage .
  • 「 -d -p 」或「 -dp 」是為了在後台運行新容器。另外在主機創立 3000 到 容器 3000 的端口映射。後來因為修改成使用 nginx 而非 http-server 、所以我直接改為 80:80 ；當然可以也可以 3000:80 避開主機的 port 80 。
docker run -dp 3000:3000 testimage

結論：
1. 使用 alpine 減少容量。
2. 鎖定 node 版本號：ex: node:18-alpine。
3. npm ci 取代 npm Install 、避免版本問題及提高依賴安裝速度。
4. package.json 單獨添加、充分利用鏡像緩存。
5. 只提取自己撰寫的文作、減小容量。

use Antd for React

選了 Antd 來當做 React 的腳手架、仍在學習熟悉。

安裝：

npm install antd

在官網教學是輸入 npm install antd –save 。後綴的 –save 作用是為了要寫入 package.json 中的 dependencies ；但其實在 npm 5.0 之後就會預設自動加入了、所以我在這裡就去掉不輸入了。

簡易使用：

import { DatePicker } from 'antd';
import 'antd/dist/antd.min.css';

<DatePicker />

在官網教學中、引入樣式是：import ‘antd/dist/antd.css’; 、但這樣會出現如下的錯誤：

經查詢後、需將引入樣式改成 import ‘antd/dist/antd.min.css’; 才不會有錯誤。

React App 101

先依這個連結確認在電腦裡已裝好 node & npm 。

打開終端機、輸入：

npx create-react-app myapp

待安裝完成後、打開 Visual Studio Code 並開啟剛建好的資料夾。

public 資料夾中刪除沒用(自認為)的檔案：

src 資料夾中只留 index.js & App.js：

刪除檔案說明：
在 public 資料夾中，create-react-app 生成了一些預設的檔案，像是 logo 圖片和 manifest.json 等，這些檔案通常是用來作為示例或者基本的應用程式設定。對於一個新的應用程式來說，這些檔案可能是不必要的，因此我們可以安全地將它們刪除，以保持專案的簡潔性。

打開 index.html 、將內容精簡如下(自認為)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.html 的修改說明：
在 index.html 中，我們對一些標籤和屬性進行了修改和刪除。首先，我們刪除了一些不必要的 meta 標籤和連結，以保持頁面的簡潔性。另外，我們將

放置在頁面的最頂部，這是因為 React 應用程式將會被渲染到這個元素中。而 %PUBLIC_URL%/favicon.ico 是一個指向 favicon 圖標的路徑，這樣瀏覽器就可以正確地載入圖標。

index.js 也精簡如下 ：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.js 的說明：
在 index.js 中，我們引入了 React 和 ReactDOM，這兩個庫是用來建構和渲染 React 應用程式的關鍵庫。我們使用 createRoot 函式將我們的應用程式渲染到了 HTML 文件中的

元素中。值得注意的是，我們使用了 <React.StrictMode>，這是一個用來啟用嚴格模式的元件，可以幫助我們在開發過程中偵測潛在的問題和錯誤。

至於 App.js 我習慣全刪、後續再自己寫碼。

101 大概就這樣囉～

How to install Node.js and npm on macOS with Homebrew

先檢查在 Mac 中是否有安裝了 Homebrew。

brew -v

如果沒有看到版本號、代表還沒安裝；先進到 Homebrew 官網、並在終端機中輸入以下內容：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

確認 Homebrew 安裝完成後、輸入以下：

brew update
brew install node

安裝完成後、檢查是否安裝成功：

node -v

npm -v

完成。