© デジラン | ランニング×ガジェットレビューのブログ All rights reserved.

【エンジニア備忘録#1】VScodeを使ってpythonでWeb開発環境構築する手順!DjangoとFlaskのインストールからWeb画面表示まで解説!【コピペするだけでOK】

最終更新日 2022年10月10日

python でwebアプリを開発したい!

そんな方に向けてVScodeにてpythonのWebアプリを開発する環境の構築を解説していきます。

筆者も数年後フリーランスに絶対なると決めているので、それに向けてpythonでWebアプリの開発を勉強しています。

仮想環境の構築と操作、DjangoとFlaskのインストールからWebに”Hello World”を表示するまでの手順を紹介していきます。

pythonでWeb開発環境をVScodeで構築の手順を徹底解説!

ここでは難しいことは考えずに手順に従ってコピペをしてください。

また、問題が発生したなら遠慮なく問い合わせてください。

筆者の勉強にもなりますので、よろしくお願いいたします。

VScodeをダウンロードする

まず、Vscodeをダウンロードします。

こちらよりVScodeをダウンロードしてください。

ダウンロードしてある方は次の手順へ進みましょう。

VScodeでpythonの仮想環境を構築する

それでは早速VScode内で環境を構築していきましょう。

まずはVScodeを開いて、

“Ctrl + @”

を押して統合ターミナルを開きます。

ここで環境を構築するコマンドを入力します。

後々はここでコードを実行したり、DjangoやFlaskをインストールしたりします。

それではここに以下のコマンドを入力します。

仮想環境を作成するフォルダはCドライブ直下”workフォルダ”とします。

仮想環境を構築するフォルダを作成する
mkdir C:work

これでCドライブ直下にworkというフォルダが作成されました。

次にこのworkフォルダの中に仮想環境を作成していきます。

以下のコマンドを入力します。

VScodeでpythonの仮想環境を構築するコマンド
python -m venv C:work\Testvenv

これでworkの直下にTestvenvという仮想環境が構築されました。

ここから

仮想環境のパスを通す

次は仮想環境のパスを通す必要があります。

仮想環境のパスが通るとコマンドの一番前に(Testvenv)という文字列が追加されます。

その状態になれば後は簡単ですが、そこに至るまでが問題です。

まずは、以下のコマンドを入力してみましょう。

仮想環境のパスを通す
C:work\Testvenv\scripts\activate.bat

activate.batというバッチファイルを実行しようとしています。

ただ、筆者はこれが実行できませんでした。

実行できたなら問題ありません。

赤文字が表示されて実行できなかった方は以下のコマンドを入力してみてください。

仮想環境のパスを通す
C:work\Testvenv\scripts\Activate.ps1

おそらくこれが一回で実行できないと思われます。

筆者も実行できませんでした。

そこで設定のソースコードをいじる必要があります。

VScodeにて、

設定(歯車マーク)→設定→設定の検索→”settingと入力”→テキストエディター→”setting.jsonで編集”をクリック

で、設定のソースコードを開きます。

そして、setting.jsonに以下をまるまるコピペします。

setting.json
{
    "python.defaultInterpreterPath": "C:\\work\\python_web\\django-project01\\flaskTest\\Scripts\\python.exe",
    "terminal.integrated.env.windows": {
        "PSExecutionPolicyPreference": "RemoteSigned"
    },
    "editor.fontLigatures": false
}

コピペして保存した後、再度以下のコマンドを実行します。

仮想環境のパスを通す
C:work\Testvenv\scripts\Activate.ps1

次は実行できるようになっているはずです。

無理なら以下を実行してください。

仮想環境フォルダに移動する
cd C:work\Testvenv\scripts
仮想環境を選択する
./Activate.ps1

以下の画像のようになればOKです。

ここまでくればあとは簡単!

Vscode仮想環境にDjangoとFlaskをインストールする

さあ早速DjangoとFlaskをインストールしていきましょう。

以下のコマンドを入力してください。

DjangoをVScodeにインストールする
pip install django
FlaskをVScodeにインストールする
pip install flask

これでインストール完了です。

ただ、pip installが通らないのであれば、pythonがインストールされていないのが原因です。

こちらからpythonをインストールしてください。インストールするだけでpipが使えるようになります。

pip通らないはpython初心者あるあるです。

Djangoのプロジェクトを始める【Webを表示してみよう】

まずは以下のコマンドを入力してDjangoのプロジェクトを開始しなければいけません。

Djangoのプロジェクトを開始
django-admin startproject config .

これでプロジェクトを開始できました。

あとはサーバーを立てるだけです。

サーバーを立ち上げる

サーバーを立ち上げるには以下のコマンドを入力します。

Djangoでサーバーを立ち上げる
python manage.py runserver

すると、ターミナル上にクリックでアクセスできる

http~~~

というのが表示されているはずです。

そこにアクセスするとWebページにロケットが飛んでいるはずです。

これでlaunchです。

WebページにHello Worldを表示してみる

さあここまで来たらソースコードをいじって開発に入れます。

まずは試しにWebページ上に”Hello World”を表示してみましょう。

C:\work\Testvenv\Scripts\config\にある

urls.py

を編集していきます。

config\urls.py
from django.contrib import admin
from django.urls import path, include # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("test.urls")) # 追加
]

次に

C:\work\Testvenv\Scripts\フォルダ内に

test

というフォルダを作成し、

作成したtestフォルダに中に

urls.py

を別途作成します。

そのために以下のコマンドを入力します。

urls.pyを作成
touch test\urls.py

そして、その中に入っている

view.py

に以下のコードをコピペします。

test\views.py
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def index(request):
    return HttpResponse("<h1>Hello World</h1>")

次にtestフォルダ内の

urls.py

に以下のコードをコピペします。

test\urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("", views.index),
]

ここまで来たら実行するだけです。

以下のコマンドを入力します。

“Hello World”を表示する
python manage.py runserver

すると、以下のように表示されていると思います。

  • 【エンジニア備忘録#1】VScodeを使ってpythonでWeb開発環境構築する手順!DjangoとFlaskのインストールからWeb画面表示まで解説!【コピペするだけでOK】 はコメントを受け付けていません
  • エンジニア

関連記事

コメントは利用できません。

【カツサプ レビュー】マラソン向けサプリの飲み方と効果を徹底解説!持久力向上?口コミも紹介!【登山でも使える?】

フルマラソンやトレランなどの持久系スポーツでは、レース前やレース中にサプリメントの摂取する方が非常に多いと思います。 目的はそれぞれ…

月間10万PV越えのランニングブロガーが愛用!便利なランニング用品とガジェットを紹介・レビュー!【マラソンとトレランを両立するアイテム】

「走る」という単純なことですが、それを高めるためには上質なアイテムが必要になってきます。 ランニングシューズやウェア、GPSウォッチ…

202210/26

月間10万PV突破のスポーツブロガーの愛用品・ブログ運営環境を徹底紹介・レビュー!【副業ブロガーのおすすめ】

最近は副業をする人が非常に多くなっています。 このご時世で「副業をしない人はやばい」と言われるほどです。 しかし、副業と言って…

【Dell inspiron 13 5310 レビュー】おしゃれなWindows PCが欲しいならこれを買え!快適にブログ執筆とプログラミングができるスペックで10万円!【大学生向け最強コスパPC】

今やPCを持っていない人は「情報弱者」と揶揄される時代です。 しかしスマホが普及しているためか、PCの使用率は低迷しています。 …

【ワイヤレスヘッドホン EdifireW820NB レビュー(白色もある!)】Airpodsレベルのノイキャンで安い!コスパ、音質(Hi-Res)、ノイキャンすべてが高レベル!【外でも家でも使えるヘッドホン】

アクティブノイズキャンセリング付きのヘッドホンは持っていますか? 最近はワイヤレスイヤホンを誰もが持っている時代ですが、ヘッドホンを…

ページ上部へ戻る