我使用 Angular 4(使用 angular CLI)构建了前端,使用 Django 和 Django Rest Framework 构建了后端。
开发环境的设置方式使得静态 Assets 、HTML、JS 等都是 Angular 应用程序的一部分。 angular 应用程序运行在由 CLI 在 localhost:4200 启动的服务器上,并且它通过一系列 HTTP 调用通过 CORS 与 DRF API 通信,该 API 位于另一个 localhost:8000 仅用于获取和服务信息。
我如何将它部署为 Heroku 上的生产就绪应用程序? heroku 指南说明了如何单独部署 Django 应用程序或单独部署 Angular 应用程序(在节点服务器上运行)。我是将它们部署为两个单独的实例还是将它们组合起来。如果是这样,我该怎么做?
最佳答案
此解决方案与如何在 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上创建一个私有(private)仓库,然后在你的本地机器上:(第三行是因为我用的是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 key (如果您已经没有的话)添加到 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 key ,则需要使用来自 github 的 ssh 存储库名称(在 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
的 django rest 框架响应。 .从现在开始,只要您想进行实时更改,您就可以使用自定义 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
差不多就是这样,我相信一切都在我记得如何做,任何问题或者如果有什么问题/对你不起作用,请发表评论并让我知道:)
关于django - 在 Heroku 上部署带有 Django Rest Framework 后端的 Angular 4 前端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46141375/