djangoを使用した動的Webサイトの作成とAWSの導入

70735 ワード

djangoを用いて動的音源サイトを作成した.
機能要件には、登録、ログイン、ログアウトのコストが含まれます.
音源再生機能、音源リスト、アルバムリストブラウズ機能、プレイリストの追加と削除機能を備えています.
この目標を達成することを目標とする.
会員登録、登録、ログアウト機能
user/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
# Create your models here.

class User(AbstractUser):
    pass

user/view.py

from django.shortcuts import render
from django.contrib.auth import authenticate, login, logout
from django.shortcuts import redirect
from .models import User

# Create your views here.

def login_view(request):
    if request.method == "POST":
        username = request.POST["username"]
        password = request.POST["password"]
        user = authenticate(username= username, password = password)
        if user is not None:
            login(request, user)
            return redirect("index")
            #print("로그인 성공")
            # request.session["loginuser"] = user.user_name 
            #return HttpResponseRedirect('blog/templates/index.html')

        else:
            print("로그인 실패")
    # return redirect('index')
    return render(request, "users/login.html")

def logout_view(request):
    logout(request)
    return redirect("index")


def signup_view(request):
    if request.method == "POST":
        print(request.POST)
        username = request.POST["username"]
        password = request.POST["password"]
        name = request.POST["name"]
        email = request.POST["email"]

        user = User.objects.create_user(username, email, password)
        user.name = name
        user.save()

        return redirect("user:login")

    return render(request, "users/signup.html")

users/templates/users/login.html

<!DOCTYPE HTML>
{% load static %}
<html lang="en">
<head>
	<title>Login V10</title>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="{% static 'images/icons/favicon.ico' %}"/>
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'fonts/Linearicons-Free-v1.0.0/icon-font.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<!--===============================================================================================-->
</head>
<body>
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100 p-t-50 p-b-90">
                
                    <span class="login100-form-title p-b-51">
						Login
					</span>
            {% if user.is_authenticated %}
            로그인 성공
            {{ user.username}}님 환영합니다.
            <div class="container-login100-form-btn m-t-17">
                <a href="{% url 'index' %}">
                <button class="login100-form-btn">
                    홈페이지
                </button>
                </a>
            </div>
            <div class="container-login100-form-btn m-t-17">
            <a href ="{% url 'user:logout' %}">
                <button class="login100-form-btn">
                    Logout
                </button>
            </a>
            </div>
            {% else %}
    
            <form action="" method="POST">
            {% csrf_token %}
                <div class="wrap-input100 validate-input m-b-16" data-validate = "Username is required">
                아이디<input name="username" type="text">
                </div>
                <div class="wrap-input100 validate-input m-b-16" data-validate = "Password is required">
                비밀번호<input name="password" type="password">
                </div>
                <div class="container-login100-form-btn m-t-17">
                    <a href="{% url 'index' %}">
                    <button class="login100-form-btn">
                        Login
                    </button>
                </a>
                </div>
            </form>
            <div class="container-login100-form-btn m-t-17">
                <a href = "{% url 'user:signup' %}">
                    <button class="login100-form-btn">
                        Signup
                    </button>
                </a>
            </div>
            {% endif %} 
        
        </div>
    </div>
</div>
<!-- jQuery -->
<!--===============================================================================================-->
<script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/animsition/js/animsition.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/bootstrap/js/popper.js' %}"></script>
	<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/select2/select2.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/daterangepicker/moment.min.js' %}"></script>
	<script src="{% static 'vendor/daterangepicker/daterangepicker.js ' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/countdowntime/countdowntime.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'js/main1.js' %}"></script>

</body>

</html>

users/templates/users/signup.html


<!DOCTYPE HTML>
{% load static %}
<html lang="en">
<head>
	<title>Login V10</title>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="{% static 'images/icons/favicon.ico' %}"/>
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'fonts/Linearicons-Free-v1.0.0/icon-font.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
<!--===============================================================================================-->	
	<link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
	<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
<!--===============================================================================================-->
</head>
<body>
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100 p-t-50 p-b-90">
                
                    <span class="login100-form-title p-b-51">
						SIGNUP
					</span>
            <form action="" method="POST">
            {% csrf_token %}
                <div class="wrap-input100 validate-input m-b-16" placeholder="Username">
                    ID<input name="username" type="text" >
                </div>
                <div class="wrap-input100 validate-input m-b-16" placeholder="Password">
                    비밀번호<input name="password" type="password">
                </div>
                <div class="wrap-input100 validate-input m-b-16" placeholder="Name">
                    이름<input name="name" type="text">
                </div>
                <div class="wrap-input100 validate-input m-b-16" placeholder="Email">
                    이메일<input name="email" type="text">
                </div>
                <div class="container-login100-form-btn m-t-17">
                    <button class="login100-form-btn">
                        SIGNUP
                    </button>
                </div>
            </form>
        
        </div>
    </div>
</div>
<!-- jQuery -->
<!--===============================================================================================-->
<script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/animsition/js/animsition.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/bootstrap/js/popper.js' %}"></script>
	<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/select2/select2.min.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/daterangepicker/moment.min.js' %}"></script>
	<script src="{% static 'vendor/daterangepicker/daterangepicker.js ' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'vendor/countdowntime/countdowntime.js' %}"></script>
<!--===============================================================================================-->
	<script src="{% static 'js/main1.js' %}"></script>

</body>

</html>

これにより会員登録/登録機能が実現した.
次に,音源サイト側の機能実装コードである.
blog/models.py

from django.db import models
from django.urls import reverse
from django.db.models.deletion import CASCADE, SET_DEFAULT, SET_NULL
from users.models import User


class Category(models.Model):
    name = models.CharField(max_length=50, help_text="음악 장르를 입력하세요")

    def __str__(self):
        return self.name


class Music(models.Model):
    music_no = models.AutoField(primary_key=True)
    music_name = models.CharField(max_length=20)
    music_artist = models.ForeignKey("Artist", related_name="artist", on_delete=models.CASCADE)
    music_composer = models.CharField(max_length = 15)
    music_lyricsist = models.CharField(max_length = 15)
    music_lyrics = models.TextField()
    music_file = models.FileField(default='')

    def __str__(self):
        return self.music_name

class Artist(models.Model):
    artist_no = models.AutoField(primary_key=True)
    artist_name = models.CharField(max_length=15)
    artist_category = models.ManyToManyField(Category, help_text="음악 장르를 설정하세요")

    def __str__(self):
        return self.artist_name

class Album(models.Model):
    album_no = models.AutoField(primary_key=True)
    album_name = models.CharField(max_length=15, default='')
    album_artist_no = models.ForeignKey("Artist", related_name="album_artist", on_delete=models.CASCADE, default='')
    album_image = models.ImageField(blank = True, null=True)
    album_decribe = models.TextField(null=True)
    album_music = models.ManyToManyField(Music)

    def __str__(self):
        return self.album_name

class PlayList(models.Model):
    list_no = models.AutoField(primary_key=True)
    user_no = models.ForeignKey("users.User", related_name = "playlist_user_no", on_delete=models.CASCADE, null=True)
    music_no = models.ForeignKey("Music", related_name = "playlist_music_no", on_delete=models.CASCADE, null=True)
    

    def get_music_no(self):
        return self.music_no

    def __str__(self):
        return f'{self.user_no} playlist'

blog/view.py

from django.shortcuts import render, redirect
from blog.models import Category, Music, Artist, Album, PlayList
from users.models import User
# Create your views here.
def index(request):
    context = {

    }
    return render(request, 'index.html', context=context)

def single(request):
    album_list = Album.objects.all()
    context = {"album_list": album_list }
    return render(request, 'single.html', context= context)

def chart(request) : #curr_page : 현재 페이지
    music_list = Music.objects.all()
    print(music_list)
    context = {"music_list" : music_list}
    return render(request, "chart.html", context )

def playlist(request):
    user_playlist = PlayList.objects.filter(user_no=request.user)
    musics = []
    for i in user_playlist:
        music = i.get_music_no()
        musics.append(Music.objects.filter(music_name=music))

    return render(request, 'playlist.html',{"play_list" : musics})

def list_add(request, music_no):
    user_no = request.user
    list_music_no = Music.objects.get(pk = music_no)
    my_list = PlayList(user_no = user_no, music_no=list_music_no)
    my_list.save()

    return redirect("/blog/playlist")

def list_delete(request, music_no):
    user_no = request.user
    list_music_no = Music.objects.get(pk = music_no)
    my_list = PlayList.objects.filter(user_no = user_no, music_no = list_music_no)
    my_list.delete()
    return redirect("/blog/playlist")

def albumdetail(request, list_id):
    
    albumdetail = Album.objects.get(pk = list_id)
    context = {"albumdetail": albumdetail}

    return render(request, "albumdetail.html", context)


def musicdetail(request, list_id):

    musicdetail = Music.objects.get(pk = list_id)
    context = {"musicdetail" : albumdetail}

    return render(request, "musicdetail.html", context)

このようにクラスによって作成されたテーブルとviews機能に基づいて,音源サイトを作成した.
作成したサイトの画像は以下の通りです.

ホームページ

音楽ページ

アルバム

プレイリストページ
すべてのコード
https://github.com/tlsalsckd13/django
該当する場所にアップロードされました.

AWSへの配備

VPCの作成
サブネットの作成
ルーティングテーブルの作成と設定
インターネットゲートウェイの作成
セキュリティグループの作成
AWS RDS/RDSサブネットの作成
aws-msql-django接続
EC 2インスタンスUBUNTUの作成と接続

セキュリティグループ-インバウンドルール-カスタムTCP/IPを追加し、場所を考慮しない

Gitとdjangoのインストール
sudo apt-get update
sudo apt-get install git
sudo apt-get install python3-pip
sudo pip3 install django
python3 -m pip install Pillow

Gitからコードを読み込み、実行する
Git clone
manage.pyが存在するディレクトリに移動
python3 manage.py runserver 0.0.0.0:8000

ブラウザに接続
ブラウザでは、EC 2-RunningException-Public DNSの後ろに8000のアドレスが表示されます.

GCPもほぼ同様の方法を採用することができる.

システムアーキテクチャ

なぜPublicサブネットが1つしか書き込まれていないのですか?

後続の改良

Reference

この問題について(djangoを使用した動的Webサイトの作成とAWSの導入), 我々は、より多くの情報をここで見つけました https://velog.io/@tlsalsckd13/django를-활용한-동적-웹사이트-제작-및-AWS-배포

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

BOJ 3190. ヘビ(Python)

Linuxに悪意のあるソフトウェア検出ツールLMDおよびウイルス対策エンジンClamAVをインストールして使用