🦧

djangoでwebサイト作成してみた

2024/04/30に公開

django

■この記事でわかること。
Djangoによる簡単なhtmlとcssで構成されたwebsiteアプリのハンズオン。
AzureDevOpsへのリポジトリ作成方法。

■対象読者：初めてDjangoアプリを作成しようとしている方。

■ざっくりとやっていくこと。

Azure DevOpsにorganizationやproject作る。
Azure DevOps projectにリポジトリを用意する。
ローカルでDjangoアプリを作る。htmlとcss適用の動作確認ができるもの。
リモートリポジトリにアプリケーションソースコードを反映させる。

■準備(事前に必要なツール類)
VS Codeインストール
Gitインストール
Azureアカウント登録
pythonインストール

1.Azure,Azure DevOpsの利用、organization作成

に関しては省略します。

2.Azure DevOpsにprojectを作る

¥https://dev.azure.com/organization名のページで、「NEW project」押します。
「Create new project」画面で、「Project name」に任意の文字列入れて、「Create」押します。
¥https://dev.azure.com/organization名/project名のページで、左側にアイコンが並んでいるのでオレンジのボタン押します。
作ったproject名でreopsが存在してるようですが、コードが入ってないので、[＊＊＊ is empty. Add some code!]と表示されます。正しいので気にしません。

3.Azure DevOpsのReposリモートリポジトリをクローンする

ローカルPCのデスクトップに任意のフォルダを作成する。
AzureDevOpsの[＊＊＊ is empty. Add some code!]と表示された画面で、[Initialize main branch with a README or gitignore]の[Initialize]を押します。
[Branches]>[New branch]を押し、[Create a branch]画面で[Name]任意文字列、[Based on]にはmainを指定して[Create]を押します。
[Clone]を押します。[Clone Repository]画面でIDE[Clone in VS Code]を押す。[リポジトリの宛先として選択]を押します。
🪐ネック：5分経ってもクローンが完了しない。git clone コマンドに[Clone Repository]画面[Command line]HTTPの文字列を渡して、AzureアカウトのPasswordを入力しても、

となる。
🌍対処：[Clone Repository]画面の[Generate Git Credentials]を押す。Passwordをコピペします。
vsコードでctrl + j でterminal起動、ローカルリポジトリを作りたいディレクトリに移動します。
git clone コマンドに[Clone Repository]画面[Command line]HTTPの文字列を渡して実行、コピペしたパスワードを貼り付けてEnter押します。

4.ローカルPCでDjangoアプリを作る

VS Codeで[EXPLORER]>[Open Folder]でローカルに作成したReposを選択します。
ctrl + j でterminalに移動し、cloneしたreposのディレクトリでgit branchを実行します。[main]と返ってきます。
VS Codeウィンドウ下部のステータスバー左端の[main]を押し、ブランチとリモートブランチが表示されるので、リモートブランチの中から、新しいbranchを選択します。
git branchを再度実行し、ブランチの選択が切り替わっていることを確認します。
cd ..を実行します。
python3 -m venv env_1
cd env_1
source env_1/bin/activate　を実行します。
🪐ネック：エラー

🌍対処：virtualenv を利用する。
pip list でライブラリ確認。
なければpip install virtualenvしpip listで確認。
venvで作った仮想環境ディレクトリから出て、
cd ..
ls
一度仮想環境削除rm -rf env_1
ls
仮想環境の作成virtualenv -p python3 env_1
仮想環境の有効化. env_1/bin/activate　(env_1)がプロンプトにつき仮想環境有効化です。
cd tutorial;ls;pip list; でdjangoが入っていなければ、pip install django を実行する。pip list で確認。
プロジェクトを作成。django-admin startproject appsite .
アプリケーションを作成。python manage.py startapp appsite_1
$ ls すると以下のようになっています。
README.md appsite appsite_1 manage.py
python manage.py runserver 実行して、¥http://127.0.0.1:8000/ にアクセスします。
以下は無視していいです。
You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
気が付けば、terminalのシェル選択箇所に以下注意が出ている。🌍対処：メッセージ右下の[Relaunch terminal]押します。

tutorial>appsite_1>templatesフォルダを作成する。基本htmlはここに置くようです。
cd appsite_1;ls;pwd
mkdir templates
ls;cd templates;pwd;
touch index.htmlでhtmlを作成し、
index.htmlを開いて、[!] + [tab] を押します。
<title>nekokawaii</title>にして、bodyタグの中にpタグ入れます。<p>Strong Style</p>
cd ..;pwd;ls
touch urls.py
urlsからview関数を呼び出す設定、tutorial>appsite_1>urls を開いて、↓を貼り付け。

tutorial/appsite_1/urls

from django.urls import path
from . import views

urlpatterns = [
    path('',views.Index, name='Index'),
]

view関数設定、tutorial>appsite_1>views にて# Create your views here.の下にビュー関数を追加します。

tutorial/appsite_1/views

from django.shortcuts import render

# Create your views here.
def Index(request):
    return render(request, 'index.html')

プロジェクトとしてのurls設定、tutorial>appsite>urls を開いて、↓を貼り付け。

tutorial/appsite/urls

from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('appsite_1.urls')), 
]

tutorial>appsite>settings.pyにて、INSTALLED_APPS に'appsite_1',追加
ローカルで動作確認。

cssは、staticフォルダを作成して格納します。
tutorial>appsite_1>static を作成して、
touch style.css でcssを作成し、以下コピペします。

tutorial>appsite_1>static>style.css

* {
    margin: 0;
    padding: 0; 
   }
body {
    background-color: rgba(228, 227, 233, 0.678); /* 背景色を設定 */
}

index.htmlで読み込むためにindex.htmlも更新します。
冒頭に {% load static %}　、
<head>タグの中に、<link rel="stylesheet" href="{% static 'style.css' %}" type="text/css"> を仕込みます。

tutorial>appsite_1>templates>index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
    <title>nekokawaii</title>
</head>
<body>
<p>Strong Style</p>    
</body>
</html>

ローカルで動作確認してもCSS適用されて表示されないです。ブラウザの開発者ツールでエラーが出ていないか見ます。
🪐ネック：エラー

🌍対処：ctrl + c で一度サーバーをとめて、python manage.py runserverで再起動します。

5.リモートリポジトリにcommit

CSS適用までローカル環境でアプリケーション動作確認ができたので、VS Codeの[SOURCE CONTROL]メニューから変更をステージに上げます。

ステージに上がったら、コメントを入れて[commit]を押します。
ボタンが、[変更を同期]に変わるので、変更の同期を押します。
[このアクションは、"origin/リモートbranch名"との間でコミットをプルおよびプッシュします。]と表示されるので、OKします。
Passwordを聞かれますので、Azure DevOpsのホームから、画面右上の[User settings]>[Personal access tokens]でtokenを生成するか、既存のManage tokensを選択して[Regenerate]するかして、コピペします。
Azure DevOpsで対象のprojectのReposのブランチに反映されていること確認します。

■参考記事
AzureDevOpsのreposの使い方。

Azure DevOpsのReposでクレデンシャル作成する方法。

git でのブランチ操作

https://blitzgate.co.jp/blog/2348/
virtualenvによる仮想化アクティブにする際のコマンド

dnango公式のチュートリアル

GitHubで編集を提案