在 Heroku 上部署带有 Django Rest Framework 后端的 Angular 4 前端

Question

我使用 Angular 4（使用 angular CLI）构建了前端，使用 Django 和 Django Rest Framework 构建了后端。

开发环境的设置方式使得静态资产、HTML、JS 等都是 Angular 应用程序的一部分。angular 应用程序运行在由 CLI 在 localhost:4200 启动的服务器上，并且它通过一系列 HTTP 调用通过 CORS 与 DRF API 通信，该 API 位于另一个 localhost:8000 仅用于获取和服务信息。

我如何将它部署为 Heroku 上的生产就绪应用程序？heroku 指南说明了如何单独部署 Django 应用程序或单独部署 Angular 应用程序（在节点服务器上运行）。我是将它们部署为两个单独的实例还是将它们组合起来。如果是这样，我该怎么做？

Answer 1

此解决方案与如何在 Heroku 上执行此操作的要求不符，但应@pdfarhad 的要求完成。

首先关于我曾经托管的内容，我的域名是在 Godaddy 注册的，它指向我在 Digitalocean 创建的服务器（droplet）。请注意，godaddy 上的 DNS 服务器指向 digitaloceans ns1.digitalocean.com、ns2.digitalocean.com和ns3.digitalocean.com。然后在 digitalocean 的网络选项卡上，创建了两个A record都指向我创建的服务器的 s，一个是example.com，另一个是api.example.com。

完成后，当你创建一个新的 Droplet 时，root 用户的密码将通过电子邮件发送，然后执行：

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

此时，您应该可以导航到您的IPADDRESS并看到 nginx 登录页面，您可能需要等待一段时间才能让 Godaddy 和 digitalocean 通过打字example.com，我想半天过去了，直到名称服务器全部同步完成等等.

现在，我只是在本地机器上设置了无密码 ssh：

$ 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

现在，因为过去我在使用 python virtualenvs 运行 linux supervisor 时遇到了一些麻烦，我只是在全局安装所有东西。uwsgi 主要是用 C 语言编写的，所以你需要一些包来编译它。

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

现在，创建一个git仓库，你可以在服务器上创建一个，但我更喜欢使用github，因为它提供了很多有用的工具，并且是项目贡献者之间协作的好地方，所以在github上创建一个私有仓库，然后在你的本地机器上：（第三行是因为我用的是Mac）

新建一个文件夹，把所有东西都放进去

$ 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

因此，再次在本地机器上，使用 scss 样式设置一个新的 angular 4 应用程序并跳过使其成为 git repo，因为它不会在 github 上正确显示，repo 内的 repo 等...：

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

而且，我们将暂时保留应用程序，请记住服务器将需要一个dist文件夹，您可以在前端文件夹中执行类似的操作，使用提前...：

$ ng build --aot -prod

现在再次在本地机器上，创建 Django Rest Framework 后端：

$ 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

现在，为了让最小的休息框架起作用，我们需要：

在settings.py添加到INSTALLED APPS：

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

在settings.py添加到顶部的MIDDLEWARE：

'corsheaders.middleware.CorsMiddleware',

另外settings.py：

CORS_ORIGIN_ALLOW_ALL = True

另外settings.py：

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

在backend/urls.py：

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

在api/models.py：

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/

完成 angular 4 前端和 DRF 后端后，我们可以将更改推送到 github，现在这将是很多更改；)

现在，让我们将前端和后端放到服务器上，登录到服务器，现在的好主意是将您的服务器（和本地机器）的 ssh 密钥（如果您已经没有的话）添加到 github。在服务器上，我们可以通过以下方式执行此操作：

$ 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 git@github.com:<GITHUBUSERNAME>/<REPONAME>.git

（在某些时候，使用 https 或 ssh 时可能会出错）如果您使用 ssh 密钥，则需要使用来自 github 的 ssh repo 名称（在 github 上，clone or download按钮将为您提供这些链接），并且在本地机器也是您可能需要设置 url 以使用 ssh 名称）：

[on local machine]
$ git remote set-url origin git@github.com:<GITHUBUSERNAME>/<REPONAME>.git

好的，现在在您的服务器上，您的项目文件夹中应该有前端和后端文件夹，angular 很容易，在服务器上：

$ 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 app

$ 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

现在，转到 api.example.com/api/test/ 应该会为您提供suceeded: true.

从现在开始，只要您想进行实时更改，您就可以使用自定义 shell 脚本，如下所示：

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

差不多就是这样，我相信一切都在我记得如何做，任何问题或如果有问题/对您不起作用，请发表评论并让我知道:)