Dockerコンテナでの静的ウェブサイトレイアウトの実装

Dockerコンテナでの静的ウェブサイトレイアウトの実装

サーバーの配置

数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cloud、Tencent Cloud)の使用をお勧めします。サーバーを購入した後、次のような問題が発生します。

ローカル コンピューターがサーバー ホストに ping を実行し、ping が失敗して要求がタイムアウトしたことを検出します。

管理サーバー インターフェイスでセキュリティ グループ列を見つけて、セキュリティ グループに入るときと出るときに icmp を追加する必要があります。 すべてを 1 回のクリックで追加することをお勧めします。


次に、ローカル コンピューターからサーバーに ping を実行できます。

Dockerのインストール

クラウドサーバーをセットアップした後、 apt-get update, apt-get upgradeを使用して情報を更新します。



次に、 dockerに入ると、次のエラーが発生します。


次に、通常のソフトウェアメソッドapt-get install docker.io, apt-get install docker.ceに従い、次の問題を発見しました。

パッケージ「docker-ce」にはインストール候補がありません

解決策は次のとおりです。

#docker ソースを追加します sudo echo "deb https://download.docker.com/linux/ubuntu zesty edge" > /etc/apt/sources.list.d/docker.list

#https の解析をサポート
apt-get install -y apt-transport-https ca-certificates curl software-properties-common

#GPG キーを追加 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

#リポジトリの場所を設定します。add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

再度実行すると次の結果が得られます。


次に、 docker run hello-worldと入力してインストール結果を確認します。

nginxのインストール

次のステップはapt-get install nginx


次のステップは、インストールの効果を確認することです。コマンドservice start nginxを入力し、ブラウザにサーバーの外部ネットワーク IP アドレスを入力して、nginx のデフォルト インターフェイスを確認します。ここでいくつか問題があります:

1.

問題: nginx: [emerg] bind() to [::]:80 が失敗しました (98: アドレスは既に使用されています)

nginx: [emerg] まだbind()できませんでした

解決方法: netstat -ntlp | grep 80で確認


次に、 service nginx stopと入力して再度確認すると、問題は解決しています。

問題: nginx: [emerg] /etc/nginx/nginx.conf:86 では "server" ディレクティブは許可されていません

解決

vim /etc/nginx/nginx.conf
サーバーを追加する{
....
}
httpに入れる
...
}
それは解決できる

まず: mkdir -p /var/www/html
次にディレクトリに移動し、 vim index.htmlを実行します。
htmlでコンテンツを自分で定義し、保存して終了し、構成ファイル内のデフォルトのindex.htmlパスを次のように変更します。


次にnginxを再起動します。service service nginx restart

ブラウザテスト

最後に、次のようにdockerコンテナのイメージを起動します。


最後に効果を確認します。ブラウザにアドレスとポート番号を入力するだけです。

これで、Docker コンテナに静的 Web サイトをデプロイする実装に関するこの記事は終了です。Docker に静的 Web サイトをデプロイする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Docker を使用して静的 Web サイト アプリケーションを作成する (複数の方法)

<<:  jQueryはフォーム検証機能を実装します

>>:  HTML ウェブページハイパーリンクタグ

推薦する

Vue+SpringBoot で Alipay サンドボックス決済を実装するためのサンプルコード

まず、Alipay サンドボックスから一連のものをダウンロードします。多くのブログで取り上げられてお...

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント

ウェブサイトのアクセス速度を向上させるための徹底的な最適化に関するヒント。ウェブサイトのアクセス速度...

Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

第1章: keepalivedの紹介VRRP プロトコルの目的は、静的ルーティングの単一点障害問題を...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...

HTML 5.1 学習: 14 の新機能とアプリケーション例

序文ご存知のとおり、HTML5 はインターネット コミュニティ全体に標準を提供する組織である Wor...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

nginxサーバーのダウンロード、インストール、使用方法の詳細な説明

ダウンロードhttp://nginx.org/en/download.html解凍ダウンロードしたn...

Docker で Node プロジェクトをビルドしてデプロイする方法

目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...

Linuxにグラフィカルインターフェースをインストールする方法

1. Linuxのインストール(rootユーザー操作) 1. vncserver をインストールしま...

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

nginx で第 3 レベルドメイン名を設定する方法の例

問題の説明nginx を設定することで、異なるポートを介して異なる Web アプリケーションにアクセ...

MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明

1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...

Vue でメニュー権限制御を実装するためのサンプルコード

バックエンド管理システムで作業している場合、通常、メニュー権限制御に関連する問題に遭遇します。もちろ...

シンプルなログインページを実装するための HTML+jQuery

目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...