Angular プロジェクトを起動するにはどうすればよいですか? nginx を使用したオンラインプロセスについて話しましょう!

Angularプロジェクトを起動するにはどうすればよいですか?次の記事では、nginx と組み合わせた Angular プロジェクトの立ち上げプロセスについて説明します。

angular プロジェクトを完了した後、どのようにオンラインに接続する必要がありますか? [関連チュートリアルの推奨事項: "angular チュートリアル"]

おそらく次のように答えるでしょう:

それは私の仕事ではありません。そうですか?

確かに、純粋なフロントエンド開発者としては、プロジェクトの開発が完了した後、次のオンライン コンテンツに触れる必要はありません。

しかし、開発者として、開発から立ち上げまでのプロジェクトのプロセスを理解することは非常に重要です。

nginxと組み合わせて説明しましょう。

#react と vue も同様

#プロジェクトのパッケージ化ここで使用されるものは

angular-cli

生成されたプロジェクト。プロジェクトの開発後は、npm run build を実行するだけです。 builder は、angular.json で事前に設定したパッケージ化コンテンツに従って出力します。

outputPath: パッケージ化されたストレージ フォルダーのパス

• index: テンプレート ファイルをマウントします
• main: プロジェクトのメインの後のエントリ ファイル
• ....
• が完了すると、

outputPath

を通じてパッケージ化されたファイルを表示できます。

Nginx のインストールコードをデプロイするマシンに Nginx をインストールします。つまり、サーバー

Nginx

です。この操作は、centos の yum ソース操作に基づいています。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"># 安装nginx yum -y install nginx # 查看版本 nginx -v # 启动nginx systemctl start nginx.service # 访问 默认是80端口 your_ip:80</pre><div class="contentsignin">ログイン後にコピー</div></div>

Nginx の構成

Nginx

の構成ファイル nginx.conf を表示します。

whereis nginx

を使用して nginx を見つけます。インストール場所

は

/etc/nginx/conf にあります。新しい構成ファイル (

demo.conf など) を d フォルダーに追加し、サーバーのインターフェイス アドレスとフロントエンド エントリ ファイル パスを構成します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">upstream api { server 127.0.0.1:8888; // 服务端 keepalive 2000; } server { listen [::]:80 default_server; server_name _; root /usr/share/nginx/demo-frontend/dist/demo-web; // 前端资源位置 location / { add_header Access-Control-Allow-Origin *; } location /api { // api 处理 proxy_pass http://api; } } # Settings for a TLS enabled server. # server { # listen 443 ssl http2 default_server; # listen [::]:443 ssl http2 default_server; # server_name _; # root /usr/share/nginx/frontend/demo.com/dist; # ssl_certificate &quot;/root/ssh/nginx/1_demo.com_bundle.crt&quot;; # ssl_certificate_key &quot;/root/ssh/nginx/2_demo.com.key&quot;; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # # Load configuration files for the default server block. # include /etc/nginx/default.d/*.conf; # # location / { #. add_header Access-Control-Allow-Origin *; # } # to api restful service # location /api { # proxy_pass http://api; # } # error_page 404 /404.html; # location = /404.html { # } # error_page 500 502 503 504 /50x.html; # location = /50x.html { # } # }</pre><div class="contentsignin">ログイン後にコピー</div></div>

Codeコメント TLS の一部はトランスポート暗号化プロトコル

https

であり、対応する証明書を追加する必要があります。

上記のコードでは、フロントエンドの静的リソースを

/usr/share/nginx/frontend/demo.com/dist/

に保存し、それからパッケージ化します。 dist/** の下のコンテンツをこのディレクトリ ファイルにアップロードします。

/usr/share/nginx/frontend/demo.com/dist/ は、実際には、index.html エントリ ファイルを指します。

比較的単純なアップロード ソリューションは、ユーザーのローカル マシンで直接実行することです:

rsync -avzh server username@62.**1.**.**:/usr/share /nginx/frontend/demo.com/dist/index.html と、/dist プロジェクト

の下にある同様のコンテンツ。パッケージ化されたコンテンツをリモート サーバーの対応する場所に同期します。次に、nginx を再起動します。つまり、nginx -s reload を実行すれば完了です。

#概要

プロセス全体を要約しましょう:

angular プロジェクトのパッケージ化

• ##サーバーのインストール nginx

• #バックエンド サービスの nginx 処理

# nginx はフロントエンド コンテンツを処理します
Angular パッケージ ファイルをサーバー上の指定された場所にアップロードします
• もちろん、ドメイン名、登録、関連する証明書などの関連情報を事前に申請する必要があります。

アイデアは非常にシンプルです。もちろん、専門的な仕事は運用およびメンテナンスの同僚に任せるべきです。忙しすぎないでください~

元のアドレス: https://juejin.cn/post/7087417501486678030

著者: Jimmy

プログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がAngular プロジェクトを起動するにはどうすればよいですか? nginx を使用したオンラインプロセスについて話しましょう!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。