在Heroku上使用Django Rest框架后端部署Angular 4前端

Answer 1

这个解决方案不符合Heroku上如何实现此操作的请求，而是应@pdfarhad的请求完成的。

首先，关于我以前的主机，我的域名是在Godaddy注册的，它指向我在DigitalOcean创建的一个服务器（droplet）。注意到godaddy上的DNS服务器指向digitaloceans、ns1.digitalOcean.com、ns2.digitalOcean.com和ns3.digitalOcean.com。然后在digitalocean上的networking选项卡上创建两条a记录，它们都指向我创建的服务器，一条是example.com，另一条是api.example.com。

完成此操作后，当您创建一个新的droplet时，将通过电子邮件发送根用户的密码，然后执行以下操作：

# ssh root@<IPADDRESSOFSERVER>
# sudo apt-get update
# sudo adduser jupiar
# sudo usermod -aG sudo jupiar
# su - jupiar
$ sudo apt-get install nginx

$ ssh-keygen (no passphrase)
$ cat ~/.ssh/id_rsa.pub (then copy this)

现在在服务器上：

$ mkdir ~/.ssh
$ chmod 700 ~/.ssh
$ nano ~/.ssh/authorized_keys (paste the rsa you copied)
$ chmod 600 ~/.ssh/authorized_keys
$ sudo nano /etc/ssh/sshd_config
    | Make sure:
    | PasswordAuthentication no
    | PubkeyAuthentication yes
    | ChallengeResponseAuthentication no
$ sudo systemctl reload sshd
$ exit

现在，您应该能够在没有密码的情况下ssh到服务器。

我使用anaconda python是因为我做了大量的数据处理，所以：

$ wget https://repo.continuum.io/archive/Anaconda3-5.0.0.1-Linux-x86_64.sh
$ bash https://repo.continuum.io/archive/Anaconda3-5.0.0.1-Linux-x86_64.sh
    | installed to /home/jupiar/anaconda3, auto append path to .bashrc
$ . .bashrc
$ source .bashrc

$ sudo apt-get install build-essential python-dev python3-dev
$ pip install uwsgi

$ echo "# example" >> README
$ git init
$ find . -name .DS_Store -print0 | xargs -0 git rm -f --ignore-unmatch
$ echo ".DS_Store" >> .gitignore
$ git add .
$ git commmit -m "first commit"
$ git remote add origin https://github.com/<GITUSERNAME>/<REPONAME>.git
$ git push -u origin master

$ ng new frontend --style=scss --skip-git

$ ng build --aot -prod

$ conda create -n exampleenv python=3.6 anaconda
$ source activate exampleenv
(exampleenv)$ pip install django
(exampleenv)$ pip install djangorestframework
(exampleenv)$ pip install django-cors-headers
(exampleenv)$ django-admin startproject backend
(exampleenv)$ cd backend
(exampleenv)$ django-admin startapp api
(exampleenv)$ python manage.py migrate
(exampleenv)$ python manage.py createsuperuser

现在，为了让一个最小的rest框架工作，我们需要：

在settings.py中，添加到installed apps中：

'rest_framework',
'corsheaders',
'api',

在settings.py添加到middleware顶部：

'corsheaders.middleware.CorsMiddleware',

CORS_ORIGIN_ALLOW_ALL = True

ALLOWED_HOSTS = ['<DIGITALOCEANSERVER-IP>', '*', 'localhost', '127.0.0.1']

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/', include('api.urls')),
]

from django.db import models

# Create your models here.

class testModel(models.Model):
    word = models.CharField("word", max_length=20)

在api/serializers.py中：

from rest_framework import serializers
from .models import testModel

class testSerializer(serializers.ModelSerializer):
    word = serializers.CharField(max_length=20)

    class Meta: 
        model = testModel
        fields = ('id', 'word')

在api/urls.py中：

from django.conf.urls import url, include
from rest_framework.urlpatterns import format_suffix_patterns
from .views import testView

urlpatterns = [ 
    url(r'^test/', testView.as_view()),
]

在api/views.py中：

from rest_framework import generics
from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.permissions import AllowAny
from django.shortcuts import render
from .models import testModel
from.serializers import testSerializer

# Create your views here.

class testView(APIView):
    def get(self, request):
        return Response({'succeded?', 'yes'})

(exampleenv)$ python manage.py runserver
navigate to :8000/api/test/

$ ssh-keygen -t rsa -b 4096 -C "<EMAIL ADDRESS>"
$ eval "$(ssh-agent -s)"
Agent pid ....
$ ssh-add ~/.ssh/id_rsa
    Enter passphrase for /home/jupair/.ssh/id_rsa:
    Identity added: /home/jupiar/.ssh/id_rsa (/home/jupiar/.ssh/id_rsa)

$ mkdir example
$ cd example
$ git init
$ git pull [e-mail]:<GITHUBUSERNAME>/<REPONAME>.git

[on local machine]
$ git remote set-url origin [e-mail]:<GITHUBUSERNAME>/<REPONAME>.git

$ cd /etc/nginx/sites-available
$ sudo rm default
$ sudo nano frontend.conf

在里面放上这样的东西：

server {
        listen 80;
        listen [::]:80;

        root /home/jupiar/example/frontend/dist;
        index index.html index.htm index.nginx-debian.html;

        server_name example.com;

        location / {
                try_files $uri $uri/ =404;
        }
}

现在我们需要将该文件链接到已启用的站点：

$ sudo ln -s /etc/nginx/sites-available/frontend.conf /etc/nginx/sites-enabled/frontend.conf
$ cd /etc/nginx/sites-enabled
$ sudo rm default
$ sudo systemctl restart nginx.service

前往example.com，我们现在应该看到angular应用程序在工作，

$ cd /etc/nginx/sites-available
$ sudo nano backend.conf

server {
    listen 80;
    listen [::]:80;

    server_name api.example.com;

    location /static/admin {
        alias /home/jupair/anaconda3/lib/python3.6/site-packages/django/contrib/admin/static/admin;
    }

    location /static/rest_framework {
        alias /home/jupiar/anaconda3/lib/python3.6/site-packages/rest_framework/static/rest_framework;
    }

    location / {
        proxy_pass http://127.0.0.1:9000/;
        proxy_set_header    Host                $host;
        proxy_set_header    X-Real-IP           $remote_addr;
        proxy_set_header    X-Forwarded-For     $remote_addr;
        proxy_set_header    X-Forwarded-Proto   $scheme;
        proxy_redirect      off;

    }
}

$ sudo ln -s /etc/nginx/sites-available/backend.conf /etc/nginx/sites-enabled/backend.conf

现在设置superviser，使用uwsgi启动django应用程序

$ sudo apt-get install supervisor
$ sudo nano /etc/supervisor/conf.d/backend_api.conf

在里面，有这样的东西：

[program:backend_api]
command = /home/jupiar/anaconda3/bin/uwsgi --http :9000 --wsgi-file /home/jupiar/example/backend/backend/wsgi.py
directory = /home/jupiar/example/backend
user = jupiar
autostart = true
autorestart = true
stdout_logfile = /var/log/backnd_api.log
stderr_logfile = /var/log/backend_api_err.log

现在，您需要运行：

$ sudo supervisorctl reread
$ sudo supervisorctl update
$ sudo supervisorctl restart backend_api
$ sudo systemctl restart nginx.service

cd /home/jupiar/example
git reset --hard (sometimes you may need to run this)
git pull [e-mail]/<GITUSERNAME>/<PROJECTNAME>.git
sudo supervisorctl restart backend_api
sudo systemctl restart nginx.service