[KDT]FCFE-8週5日転送、配備

9104 ワード
SSR テキストリンク
React
forwardRef
  • useref
    • を使用
    function App(){
  const myInputRef = useRef();
  
  const click = () => {
    console.log(myInputRef.current.value);
  };
  
  return (
    <div>
      <MyInput ref={myInputRef}/>
      <button onClick={click}>send</button>
    </div>
  );
}
  • forwardRef
    • :参照を親に転送します.
    import React from 'react';

export default React.forwardRef(function MyInput(props, ref){
  return (
    <div>
      <p>MyInput</p>
      <input ref={ref} />
    </div>
  )
});
    Deploy React App
    SPAプロジェクトの導入について

  • create react appを使用して作成されたプロジェクトはnpm run buildで構築できます.

  • build/staticフォルダにJS、CSSファイルを作成し、ファイル名にhash値を付けます.

  • ¥¥АААААААААААА

  • ルーティングパスにかかわらず、応答アプリケーションを受信して実行

  • ルーティングは、受信したレスポンスアプリケーションを実行した後に適用されます.

  • 静的ファイル以外のすべてのリクエストをインデックスします.html応答の使用
    • React Wep AppをService Packageに配備
    npm install serve -g
    serve -s build

  • サービスというパッケージをグローバルにインストールします.

  • -sオプションを使用してserveコマンドを指定して実行するbuildフォルダ.
    (-sオプションでは、任意のルーティング要求がindex.htmlに応答できるようにします.)
    • React Wep AppをAWS 3に配備

  • パケットの作成

  • buildファイルにアップロードされたすべてのファイルとフォルダ

  • プロパティ->静的Webサイトのベアラ->編集->有効->インデックスドキュメント:index.html->エラードキュメント:index.html

  • アップロードしたファイルをパブリックサーバに転送

  • 権限->パブリックアクセスの無効化->編集->すべてのマスクの無効化->OK

  • 権限->パケットポリシー->パケットポリシージェネレータの使用->パケットポリシーの編集->保存

  • プロパティの下のアドレスに接続できます.

  • cloudfrontcdnを掛けるとhttpsとして使用できます.
    • React Wep AppをNginXに配備

  • AWS EC 2ダッシュボード->インスタンスの起動->奮闘->Prettyerの構成->セキュリティグループ(httpの追加):セキュリティグループ名をbucket名に設定->鍵ペアの再作成とダウンロード->インスタンス

  • ダウンロードキーペアを含むフォルダで、ssh [email protected].아이피.주소 -i 파일명.pemを選択します.
  • chmod 400 파일명.pem権限調整
    • - ssh [email protected].아이피.주소 -i 파일명.pem

  • 右奮闘を実行する.

  • ダウンクローンでプロジェクトを取得します.

  • 右奮闘でノードを設定する

  • インストールコードの挿入

  • エクスポートコードは右奮闘主パスです.プロフィールに入れる

  • 右奮闘サーバ(exit)を開いてnvm installノードを再実行

  • npm ci

  • npm run build

  • sudo apt-get update

  • sudo apt-get upgrade

  • wget http://nginx.org/keys/nginx_signing.key

  • sudo apt-key add nginx_signing.key

  • sudo rm -rf nginx_signing.key

  • sudo nano/etc/apt/sources.リストの下に2行のコードを追加

  • deb http://nginx.org/packages/mainline/ubuntu/ trusty nginx

  • deb-src http://nginx.org/packages/mainline/ubuntu/ trusty nginx

  • ctrl+x y

  • sudo apt-key add nginx_signing.key

  • sudo apt-get update

  • sudo apt-get upgrade

  • sudo apt-get install nginx

  • nginx -v

  • sudo rm -rf/etc/nginx/sites-available/default

  • sudo nano -rf/etc/nginx/sites-available/default
    • 内容をdefaultに追加
    sever {
  listen 80;
  sever_name localhost;
  
  root /home/ubuntu/파일명/build;
  index index.html;
  
  location / {
    try_files $uri $uri/ /index.html;
  }
}

  • sudo service nginx restart

  • ローカルホストアドレスへのサービス.
    • node.js Expressを使用したReact Wep Appの導入
  • プロジェクトフォルダの
    • npm i express
    server.jsを作成します.
    const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.listen(9000);
    node server.js
    const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req,res)=>{
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);
    サーバ側レンダリングについて

  • サーバから応答を取得する場合は、静的ファイルだけでなく、サーバに応答値を作成してから、静的ファイルを降格します.

  • static fileをダウンロードし、ブラウザでreactionアプリケーションを実行すると、SPAのように実行されます.

  • レスポンスコンポーネントはブラウザではなくノードです.jsで使用します.
  • ReactDOMServer.renderToString(<App/>);(結果は文字列:ブラウザでタグ付けされたhtmlで、応答として降格します.)

  • サーバ上でルーティングや転送などの処理を行う.
    △複雑で難しい.

  • サーバがJSXを含むレスポンスコードを読み取るようにbabelを設定する必要があります.
    • const express = require('express');
const path = require('path');
const ReactDOMServer = require('react-dom/server');
const React = require('react');

// <div data-reactroot=''>Hello</div>
console.log(ReactDOMServer.renderToString(React.createElement('div', null, 'Hello')));

const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/test', ()=>{
  const ssr = ReactDOMServer.renderToString(React.createElement('div', null, 'Hello'));
  const indexHtml = fs
  .readFileSync(path.join(__dirname, 'build', 'index.html'))
  .toString()
  .replace('<div id="root"></div>',`<div id="root">${ssr}</div>`)
  
  res.send(indexHtml);
})

app.listen(9000);
    Pythonでのデフォルトの引数mess
    スキーマを使用してデータベーススキーマを探る