基礎のない初心者向けに、vscode を使用して新しいフロントエンド プロジェクトを作成し、HTML ページを作成して実行する方法を説明します。
いくつかの手順を実行する必要があります。
- 新しいフォルダーを作成する
- フォルダー内に、
xxx.html
たとえばという名前の新しいファイルを作成します。index.html
- vscodeを開き、「ファイル」→「フォルダーを開く」で作成したフォルダーを開きます。
- Index.html のコードを編集します。vscode の組み込みコードは機能しません。HTML を記述して Enter キーを押すだけで、次のコードが生成されます。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my webpage</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
</body>
</html>
- 内部のタイトルと h1 コンテンツを変更すると、シンプルなフロントエンド ページが生成されます
- 「index.html」を右クリックして、ブラウザで開くことを選択してください。HTML
ファイルを継続的に変更してテストしたい場合は、VS Code の「表示」-「ターミナル」を選択し、次のコマンドを入力して一時的な Web サーバーを起動します。 . Python環境はすでにインストールされています
python -m http.server
一時的な Web サーバーを起動する主な目的は、ローカル コンピューター上に Web サーバー環境を提供し、Web サイトまたは Web アプリケーションをブラウザーでライブでプレビューおよびテストすることです。
通常、ファイル プロトコルを使用して HTML ファイルをローカルで開くことには制限があります。たとえば、一部のブラウザでは、ファイル プロトコル (file://) を使用してクロスオリジン リソースを読み込むことができません。したがって、これらの制限を回避する HTTP プロトコル (http://localhost:8000/index.html) を使用する方法をお勧めします。
単純な Web サーバーは、ターミナルにコマンド python -m http.server を入力することですぐに作成できます。このコマンドは、現在のディレクトリで Web サーバーを起動し、デフォルトでポート 8000 をリッスンします。ブラウザで http://localhost:8000 にアクセスすると、プロジェクト ファイルを表示できます。
この Web サーバーは、ローカルのテストと開発のための単なる単純なサーバーであり、運用環境では使用しないことに注意してください。実稼働環境では、多くの場合、より強力でスケーラブルで安全な Web サーバーが必要になります。
具体的な操作は以下の通りです。
- CD でフォルダーに移動します
- Pythonのバージョンを確認し、インストールされていない場合は、最初にインストールしてください
- Python -m http.server
➜ ~ python --version
Python 3.9.6
➜ ~ cd /Users/morris/Desktop/test
➜ test python -m http.server
Serving HTTP on :: port 8000 (http://[::]:8000/) ...
サービス開始後にindex.htmlを開くか、localhost:8080を直接使用してページにアクセスしてください。