DjangoのサイトにYouTubeを埋め込んでみた

Pocket

今回はこの前作成したくじ引きサイトの使い方を動画にし、YouTubeにアップロードしたので、その動画をサイトに埋め込みました。

その方法を書いていこうと思います。

以前作成したくじ引きアプリの記事は以下になります。

Djangoでくじ引きアプリを作ってみる_part14

【参考サイト】

http://www.tohoho-web.com/bootstrap/embed.html

【手順】

まずは、YouTubeに動画をアップロードします。

その後、共有>埋め込む>コードを選びコピーします。

<iframe width="560" height="315" src="https://www.youtube.com/embed/rXVlRwXytHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このままだと、動画の枠がレスポンシブ対応していないため、レスポンシブ対応にします。以下のように変更します。

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/rXVlRwXytHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

このコードをくじ引きサイトのテンプレートに埋め込みます。

ファイル:myapptdl>tdl>templates>tdl>tdl_list.html

コード:

{% extends 'layout.html' %}
{% block content %}
    <h1>くじ引き内容</h1>

{% if user.is_authenticated %}
        <table class='table table-striped table-hover'>
            <tr>
                <th>内容</th><th>編集</th><th>削除</th>
            </tr>
            {% for tdl in object_list%}
            <tr>
                <td> {{ tdl.item }}</td>
                <td> <a href='{% url "tdl:update" tdl.id %}'>編集</a> </td>
                <td> <a href='{% url "tdl:delete" tdl.id %}'>削除</a> </td>
            </tr>
            {% endfor %}
        </table>
            <div>
                <a href='{% url "tdl:create" %}' class="btn btn-primary">新規作成</a>
                <a href='{% url "tdl:execution" %}' class="btn btn-secondary">実行</a>
            </div>
{% else %}
    <div class = "text-dark">このサイトはくじ引きする内容を自分で作成して、自分でくじをするサイトです。<br>
        まずは、「Sign up」より自分のログインIDを作成してください。<br>
        くじ引きの内容は作成者本人以外は見れないようになっています。
    </div>
    <br>
    <table class='table table-striped table-hover'>
        <tr>
            <th>内容</th>
        </tr>
        <tr>
            <td>サンプル1</td>
        </tr>
        <tr>
            <td>サンプル2</td>
        </tr>
    </table>

#以下を追加---------- <br> <h3>くじ引きアプリの使い方</h3> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/rXVlRwXytHE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>

#ここまで------------
{% endif %} {% endblock %}

以上で設定は終わりです。

次はHerokuにデプロイして確認してみます。

git add .
git commit -m .
git push heroku master

 

以下サイトを確認すると、ちゃんとYouTubeの動画が埋め込まれました。
https://kuzibiki.herokuapp.com/tdl/

以上で終わりです。ありがとうございました。

Pocket

DjangoアプリをHerokuにデプロイしてみる

Pocket

前回、HerokuCLIをUbuntuにインストールしましたので、今回はその続きで実際に作成したアプリケーションをデプロイまでしてみます。

【前提】

・Gitをインストールしている
・HerokuCLIをインストールしている

【参考サイト】

https://qiita.com/frosty/items/66f5dff8fc723387108c

https://devcenter.heroku.com/articles/django-app-configuration#the-basics

【インストール】

gunicornインストール

pip3 install gunicorn

Defaulting to user installation because normal site-packages is not writeable
Requirement already satisfied: gunicorn in ./.local/lib/python3.8/site-packages (20.0.4)
Requirement already satisfied: setuptools>=3.0 in /usr/local/lib/python3.8/dist-packages (from gunicorn) (49.1.0)

django-herokuインストール

pip3 install django-heroku

Defaulting to user installation because normal site-packages is not writeable
Collecting django-heroku
Using cached django_heroku-0.3.1-py2.py3-none-any.whl (6.2 kB)
Collecting dj-database-url>=0.5.0
Using cached dj_database_url-0.5.0-py2.py3-none-any.whl (5.5 kB)
Collecting psycopg2
Using cached psycopg2-2.8.5.tar.gz (380 kB)
ERROR: Command errored out with exit status 1:
command: /usr/bin/python3.8 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-68snfp0w/psycopg2/setup.py'"'"'; __file__='"'"'/tmp/pip-install-68snfp0w/psycopg2/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /tmp/pip-pip-egg-info-1lsosvb0
cwd: /tmp/pip-install-68snfp0w/psycopg2/
Complete output (23 lines):
running egg_info
creating /tmp/pip-pip-egg-info-1lsosvb0/psycopg2.egg-info
writing /tmp/pip-pip-egg-info-1lsosvb0/psycopg2.egg-info/PKG-INFO
writing dependency_links to /tmp/pip-pip-egg-info-1lsosvb0/psycopg2.egg-info/dependency_links.txt
writing top-level names to /tmp/pip-pip-egg-info-1lsosvb0/psycopg2.egg-info/top_level.txt
writing manifest file '/tmp/pip-pip-egg-info-1lsosvb0/psycopg2.egg-info/SOURCES.txt'

Error: pg_config executable not found.

pg_config is required to build psycopg2 from source. Please add the directory
containing pg_config to the $PATH or specify the full executable path with the
option:

python setup.py build_ext --pg-config /path/to/pg_config build ...

or with the pg_config option in 'setup.cfg'.

If you prefer to avoid building psycopg2 from source, please install the PyPI
'psycopg2-binary' package instead.

For further information please check the 'doc/src/install.rst' file (also at
<https://www.psycopg.org/docs/install.html>).

----------------------------------------
ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.

インストール時にエラーが出たので、調べると以下で解決した事例にたどり着きました。
参考:https://yukituna.com/2313/

sudo apt install libpq-dev

上のコマンドを実行すると無事にインストールできました。

Running setup.py install for psycopg2 ... done
Successfully installed dj-database-url-0.5.0 django-heroku-0.3.1 psycopg2-2.8.5 whitenoise-5.2.0

dj-database-urlインストール

pip3 install dj-database-url

Defaulting to user installation because normal site-packages is not writeable
Requirement already satisfied: dj-database-url in ./.local/lib/python3.8/site-packages (0.5.0)

【各種設定】

これから3つのファイルを作成します。

そして作成した3つのファイルは以下の場所へ保存します。

場所:Djangoプロジェクトフォルダ(manage.py)が入っているところ

Procfile作成

echo web: gunicorn プロジェクトフォルダー名.wsgi --log-file - > Procfile

requirements.txt作成

pip freeze > requirements.txt

runtime.txt作成

現在利用しているPythonのバージョンを書き出します。

echo python-3.8.2 > runtime.txt

echo python-3.8.2 > runtime.txt

自分のバージョンが不明な時は「python –version」で確認できます。

.gitignore作成

Gitで管理不要なファイルを指定します。

echo -e __pycache__\\ndb.sqlite3\\n.DS_Store\\nlocal_settings.py > .gitignore

【各種設定変更】

settings.pyの設定変更

本番環境ではDebugをFalseにし、ローカル環境でTrueにする

ファイル:プロジェクト>settings.py

try:
    from .local_settings import *
except ImportError:
    pass

以下ファイルをsettings.pyと同じ場所に作成する

ファイル:プロジェクト>local_settings.py

import os

#settings.pyからそのままコピー
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

SECRET_KEY = '******' #settings.pyからそのままコピー DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } } DEBUG = True #ローカルでDebugできるようになります

SECRET_KEY設定

SECRET_KEYをsettings.pyから削除してローカルから呼び出すようにします。

SECRET_KEY = '*****' #後で利用するため、コピーしてから削除します。

#以下を追加します

if not DEBUG:
    SECRET_KEY = os.environ['SECRET_KEY']

whitenoise設定

CSSを反映させるため、以下を追加します。

ファイル:プロジェクト>local_settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
  'whitenoise.middleware.WhiteNoiseMiddleware', #追加 ]

データベース設定

Herakuではpostgresqlを利用する必要があります。
そのため、postgresqlを利用できるように変更します。
また、「dj_database_url」の変更も併せて行います。

import dj_database_url

DATABASES = { 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 'ENGINE': 'django.db.backends.postgresql_psycopg2', 'NAME': 'name', 'USER': 'user', 'PASSWORD': '', 'HOST': 'host', 'PORT': '', } }

db_from_env = dj_database_url.config(conn_max_age=600, ssl_require=True)
DATABASES['default'].update(db_from_env)

CSSファイル設定

settings.pyにCSSの設定を追加します。

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

django_heroku設定

最後にdjango_herokuを追加します。

if not DEBUG:
    SECRET_KEY = os.environ['SECRET_KEY']
    import django_heroku #追加
    django_heroku.settings(locals()) #追加

Git管理する

sudo git add .
sudo git commit -m .

Herokuへアップロードする

heroku login

プロジェクトを作成する

プロジェクト名がアプリの名前とURL名になります。

heroku create プロジェクト名

SECRET_KEYをHerokuに設定する

heroku config:set SECRET_KEY='settings.pyに記載されていたSECRET_KEYを記入'

Herokuにファイルをプッシュする

git push heroku master

Dynoを起動させる

heroku ps:scale web=1

#結果 › Warning: heroku update available from 7.42.4 to 7.42.6. Scaling dynos... ⣾ (node:12549) SyntaxError Plugin: heroku: /home/test/.local/share/heroku/config.json: Unexpected end of JSON input module: @oclif/config@1.16.0 task: runHook prerun plugin: heroku root: /snap/heroku/3962 Scaling dynos... done, now running web at 1:Free

 データベース設定

heroku run python manage.py migrate

#結果 › Warning: heroku update available from 7.42.4 to 7.42.6. (node:12741) SyntaxError Plugin: heroku: /home/test/.local/share/heroku/config.json: Unexpected end of JSON input module: @oclif/config@1.16.0 task: runHook prerun plugin: heroku root: /snap/heroku/3962 See more details with DEBUG=* Running python manage.py migrate on ⬢ kuzibiki... up, run.8800 (Free) Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions, tdl Running migrations:

管理者用のスーパーユーザの作成

このユーザーはインターネットに公開されるため、安易なパスワードは避けましょう。

heroku run python manage.py createsuperuser

アクセスする

heroku open

アクセスすると以下のURLに遷移して、無事にアプリが公開されました。

https://kuzibiki.herokuapp.com/tdl/

今回は以上になります。ありがとうございました。

Pocket

HerokuCLIをUbuntuに入れてみる

Pocket

今回は作成したくじ引きアプリをインターネットに公開するため、Herokuを利用したいと思います。

そのため、今回はHerokuCLIをUbuntuにインストールします。

【前提条件】

この記事は、以下の条件を満たしていることが前提になります。

・gitのインストールと初期セットアップ
・Herokuのアカウント登録

詳細は以下を参照。

https://devcenter.heroku.com/articles/heroku-cli#download-and-install

【環境】

・Ubuntu 20.04

【インストール】

sudo snap install --classic heroku
[sudo] test のパスワード:
heroku v7.42.4 from Heroku✓ installed

heroku --version
heroku/7.42.4 linux-x64 node-v12.16.2

【Herokuログイン】

heroku login
› Warning: heroku update available from 7.42.4 to 7.42.6.
(node:3014) SyntaxError Plugin: heroku: /home/test/.local/share/heroku/config.json: Unexpected end of JSON input
module: @oclif/config@1.16.0
task: runHook prerun
plugin: heroku
root: /snap/heroku/3962
See more details with DEBUG=*
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/feecc1bb-e75f-482c-975f-7b305f8a4498?requestor=MyNTY.g3QAvu
Logging in... done
Logged in as ***@****

Enterを押すと、ブラウザ画面が立ち上がって、ログイン画面が表示されるので、ログインする。

以上でログインまでを行うことができました。

次回は実際にアプリをデプロイしようと思います。

【参考サイト】

https://jp.heroku.com/home

Pocket