作成アプリケーションがWeb上でハイパーリンクにならない。

前提・実現したいこと

機械学習初心者です。

ローカルで作成したアプリケーションをWinSCPを使用して、リモートサーバーへ転送しようとしています。

WinSCPを使用すると、ハイパーリンク表示せず、文字がだけが表示されてしまいます。

しかし、WinSCPを使用せずローカルで runserver 後、http://127.0.0.1:8000/polls/ にアクセスすると画像のようにハイパーリンク表示にすることができます。

イメージ説明

WinSCPを使用して画像のようにハイパーリンク表示にするにはどうすればよいのでしょうか?

ディレクトリの構造

mysite──────polls
               ├── templates
               │        └─ polls
               │　　　       ├── detail.html
               │　　　       ├── index.html
               │　　　       └── results.html
               │
               ├── urls.py
               └── views.py

該当のソースコード

該当のコードのみ記載しております。必要以上に省略してしまいましたらすみません。

urls.py

from django.urls import path

from . import views

app_name = 'polls'
urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('<int:pk>/', views.DetailView.as_view(), name='detail'),
    path('<int:pk>/results/', views.ResultsView.as_view(), name='results'),
    path('<int:question_id>/vote/', views.vote, name='vote'),
]

views.py

from django.http import HttpResponseRedirect
from django.shortcuts import get_object_or_404, render
from django.urls import reverse
from django.views import generic

from .models import Choice, Question


class IndexView(generic.ListView):
    template_name = 'polls/index.html'
    context_object_name = 'latest_question_list'

    def get_queryset(self):
        """Return the last five published questions."""
        return Question.objects.order_by('-pub_date')[:5]

class DetailView(generic.DetailView):
    model = Question
    template_name = 'polls/detail.html'

class ResultsView(generic.DetailView):
    model = Question
    template_name = 'polls/results.html'


def vote(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    try:
        selected_choice = question.choice_set.get(pk=request.POST['choice'])
    except (KeyError, Choice.DoesNotExist):
        return render(request, 'polls/detail.html', {
            'question': question,
            'error_message': "You didn't select a choice.",
        })
    else:
        selected_choice.votes += 1
        selected_choice.save()
        return HttpResponseRedirect(reverse('polls:results', args=(question.id,)))

detail.html

<h1>{{ question.question_text }}</h1>

{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}

<form action="{% url 'polls:vote' question.id %}" method="post">
{% csrf_token %}
{% for choice in question.choice_set.all %}
    <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
    <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
{% endfor %}
<input type="submit" value="Vote">
</form>

index.html

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

results.html

<h1>{{ question.question_text }}</h1>

<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
{% endfor %}
</ul>

<a href="{% url 'polls:detail' question.id %}">Vote again?</a>

< 追記 >

Winscpファイル転送後
ローカルでマイディグレーション(エラーなし)。

ローカルでrunserver

python  manage.py runserver 0.0.0.0:8000

webにアクセス。ハイパーリンクできず。

試したこと

①detail.htmlが間違がっていた？
こちらのサイトを参考にdetail.htmlのコードを書き直した。
https://tutorial.djangogirls.org/ja/html/

detail.html

<html>
    <div>
        <h1>{{ question.question_text }}</h1>
    <div>

        {% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
    
        <form action="{% url 'polls:vote' question.id %}" method="post">
        {% csrf_token %}
        {% for choice in question.choice_set.all %}
            <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
            <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br>
         {% endfor %}
         <input type="submit" value="Vote">
         </form>
</html>

WinSCPを使用せずローカルで runserver 後、http://127.0.0.1:8000/polls/ にアクセスするとハイパーリンク表示にすることができた。
WinSCPを使用してアクセスする接続拒否され表示できない。

②settings.pyに問題がある？
前回の質問(https://teratail.com/questions/gdwgsl8tbhav6a)
でご教授頂いたコードで
mysite/mysite/ settings.pyのDATABASESを

 'NAME': str(os.path.join(BASE_DIR, 'db.sqlite3'))

に変更後、（ハイパーリンク表示ではないが）WinSCP使用してWebサイトに繋げることができた。
しかし、今回再度繋げることができず、画像のように接続拒否されるようになってしまった。
前回とコードの変更はしていない。
イメージ説明

mysite/mysite/settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ["*"]


# Application definition

INSTALLED_APPS = [
    'polls.apps.PollsConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

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',
]

ROOT_URLCONF = 'mysite.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'mysite.wsgi.application'


# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': str(os.path.join(BASE_DIR, 'db.sqlite3')),
    }
}


# Password validation
# https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/2.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.2/howto/static-files/

STATIC_URL = '/static/'

使用ツール

Python3.6.9
Djando2.2.7
Windows10

ご教示頂けますと幸いです。どうぞよろしくお願いいたします。

TakaiY

2022/06/03 09:49

「WinSCPを使用すると、ハイパーリンク表示せず、文字がだけが表示されてしまいます。」のときの、WinSCPを使ってファイルを転送した「後」に実施した手順を追記してください。回答はここではなく、質問を編集して追記してください。

myao

2022/06/04 06:20

コメントありがとうございます。追記しましたのでご確認よろしくお願いいたします。

TakaiY

2022/06/04 07:40

> Winscpファイル転送後ローカルでマイディグレーション(エラーなし)。ローカルでrunserver python manage.py runserver 0.0.0.0:8000 webにアクセス。ハイパーリンクできず。あいかわらず、やっていることがよくわかりません。 - ファイルを転送したあと、リモートサーバ上でrunserverしなければ意味がありません。そして、確認はWinSCPではなく、ブラウザでリモートサーバにアクセスするのではないでしょうか。 - ファイルの内容に問題があるのであれば、ローカルでも起きるはずです。ローカルとリモートでパスの差分があるのでは試験がしにくいので、環境は揃えるべきです。

myao

2022/06/04 12:01

ローカル（コマンドプロンプト）で runserver 後、ブラウザでリモートサーバにアクセスしています。書き方がおかしくて申し訳ございません。リモートサーバ上でrunserverのやり方が分かりません。

回答2件

「ローカル（コマンドプロンプト）で runserver 後、ブラウザでリモートサーバにアクセスしています。」

これではだめです。
リモートでrunserverをしたあと、リモートサーバにブラウザでアクセスしてください。

投稿2022/06/04 13:21

TakaiY

総合スコア11449

回答へのコメント

myao

2022/06/04 13:47

リモートで runserver のやり方が分かりません。ご教授よろしくお願いいたします。

TakaiY

2022/06/04 15:38

リモートがどのようなシステムなのかわからないので、説明するのは難しいですね。 Linuxなどであれば、sshでログインして、インストールしたアプリのディレクトリに移動してrunserverでしょうか。

myao

2022/06/05 12:31 編集

WinSCPでssh2でキーボードによる認証を許可、ファイル転送した後、 sshでログインするためにコマンドプロンプトで、 ssh ユーザー名@ホスト名をすると、ユーザー名@ホスト名: Permission denied (publickey).　とエラーが表示されます。 ssh -i 秘密鍵ユーザー名@ホスト名　をすると、 Load key "秘密鍵": invalid format ユーザー名@ホスト名: Permission denied (publickey). と表示されます。 ssh -i 秘密鍵/ユーザー名@ホスト名　をすると Warning: Identity file 秘密鍵/ユーザー名@ホスト名 not accessible: No such file or directory. usage: ssh [-46AaCfGgKkMNnqsTtVvXxYy] [-B bind_interface] [-b bind_address] [-c cipher_spec] [-D [bind_address:]port] [-E log_file] [-e escape_char] [-F configfile] [-I pkcs11] [-i identity_file] [-J [user@]host[:port]] [-L address] [-l login_name] [-m mac_spec] [-O ctl_cmd] [-o option] [-p port] [-Q query_option] [-R address] [-S ctl_path] [-W host:port] [-w local_tun[:remote_tun]] destination [command] と表示されます。 C:\Users\user_name\ssh の下に秘密鍵は置いてあります。どうすればいいのでしょうか。ご教授よろしくお願いいたします。

TakaiY

2022/06/06 01:23

質問とまったく違う話になっていますので、別の質問をたてて聞くのがいいでしょう。そのときには - WinSCPでアクセスしているときはどのように設定しているのか。 - 秘密鍵/公開鍵はどのように作成してどこに保存したのかについての情報を追加するといいでしょう。

自己解決

アプリケーションを再度作成し直したところ、ページに到達出来なかっため、
リモートでrunserverをしたあと、リモートサーバにブラウザでアクセスする必要があった。
そのため、こちらの質問(https://teratail.com/questions/sbdxh8h9cyrwx4#reply-bg1uaghqta6p7z) で回答頂いたように、puttyのツールを使って、sshで使える形式に変更した後、コマンドプロンプトで、 ssh -i 秘密鍵ユーザー名@ホスト名 →cd WinSCP転送先→データベースをmigrate→ python manage.py runserver 0.0.0.0:8000 の後、リモートサーバにブラウザでアクセスしたらハイパーリンク表示のアプリケーションサイトに到達できた。

（ハイパーリンク表示ではないが）前回Webサイトに繋げることができたときでは、リモートで runserver するために、sshで使える形式に変更等は行っていないが、接続できたので不思議が、ハイパーリンク表示できなかったのはhtml　等のコードが異なっていたのかと思う。

投稿2022/06/06 10:04

myao

総合スコア116