ホームページ > 記事 > ウェブフロントエンド > CDN の React Webpack を使用してファイルをパッケージ化する
CDN の React Webpack を使用してファイルをパッケージ化する
- php中世界最好的语言オリジナル
- 2018-03-17 15:24:133025ブラウズ
今回はCDNのreact webpackを使ってファイルをパッケージ化する際の注意事項を紹介します。
この記事では webpack の基本的な構成については紹介しません。基本的な構成について質問がある場合は、公式ドキュメントを参照してください。
1. webpack.config.js を設定します
output.publicPath を、アップロード先の cdn アドレスに変更します (上記のアップロード設定に対応):
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
パッケージ化
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
パッケージ化されたファイルには、以下が含まれます。例:
index.html 12345678.src.js 12345678.src.css ...
この時点で、cdn ファイルはパッケージ化後に生成されたindex.html ファイルに導入されています。
<html lang="en"> <head> <title>title</title> <link href="https://your_base_cdn_url/production/cdn/12345678.src.css" rel="external nofollow" rel="stylesheet"> </head> <body id="body"> <p id="root"></p> <script src="https://your_base_cdn_url/production/cdn/12345678.src.js"></script></body> </html>
2. CDN にファイルをアップロードします
デプロイメント スクリプトで cdn をアップロードするスクリプトを作成します。例:
echo "start uploading to upyun" HOST=v0.ftp.upyun.com USER=uploader/your-username PASS=your-password cd build files=$(ls | grep -v 'index.html' | xargs) ftp -inv $HOST <<EOF user $USER $PASS mkdir /$node_env/cdn cd /$node_env/cdn mput $files bye EOF cd .. echo "finish uploading to upyun"
ホームページ ファイル をサーバーにアップロードし、nginx プロキシ
server {
listen 80;
server_name your_server_name;
access_log /var/log/nginx/your_project.log;
root /var/www/your_project/production/current;
location / {
try_files $uri /index.html =404;
add_header Pragma no-cache;
expires -5y;
}
location ~ \.(js|css)$ {
expires 360000;
add_header Cache-Control "max-age=360000;";
}
}
を使用してアクセスします。 http:///your_server_name は、CDN によって高速化された Web ページにアクセスできます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がCDN の React Webpack を使用してファイルをパッケージ化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。