https://chuanshuoge-ecommerce.herokuapp.com/
code link
https://github.com/chuanshuoge6/ecommerce
----------------------------------------
create app on heroku
git init
git:remote -a chuanshuoge-ecommerce
------------------------
#power shell
heroku login
heroku buildpacks:set heroku/python
heroku buildpacks:add --index 1 heroku/nodejs
---------------------
copy files from react folder to django folder
//package.json add postinstall
{
"name": "python-react",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.19.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"image-to-base64": "^2.0.1",
"querystring": "^0.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-icons": "^3.7.0",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-stripe-checkout": "^2.6.3",
"react-table": "^6.10.0",
"reactstrap": "^8.0.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^6.1.0",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "npm run build"
},
"engines": {
"node": "10.12.0",
"npm": "6.10.2"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
------------------------------------
//Procfile
release: python manage.py migrate
web: gunicorn reactdjango.wsgi --log-file -
---------------------------------
//create requirement.txt
pip freeze > requirements.txt
-------------------------------
//whitenoise static storage
#power shell
pip install Django whitenoise gunicorn
#django settings
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'build', 'static'),
]
------------------------------
//tell heroku to use react as frontend
#django setting
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'build')],
'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',
],
},
},
]
#django urls
from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView
urlpatterns = [
path('admin/', admin.site.urls),
path('rest-auth/',include('rest_auth.urls')),
path('api/', include('music.api.urls')),
path('', include('django.contrib.auth.urls')),
re_path('.*', TemplateView.as_view(template_name='index.html'))
]
//allow heroku
#django settings
ALLOWED_HOSTS = ['chuanshuoge-ecommerce.herokuapp.com', '127.0.0.1']
----------------------------------
change request url to heroku
sample action
import axios from 'axios';
const config = require('../../config');
export function changePassword(token, data) {
return {
type: "change_password",
payload: axios({
method: 'post',
url: config.URL + 'rest-auth/password/change/',
headers: {
Authorization: 'Token ' + token,
},
data: data,
})
}
}
//config
module.exports = {
URL: 'https://chuanshuoge-ecommerce.herokuapp.com/',
//URL: 'http://127.0.0.1:8000/',
}
------------------------------------
#power shell
git add .
git commit -am "make it better"
git push heroku master
--------------------------------
heroku logs
PS C:\Users\bob\django\project2> git push heroku master
Enumerating objects: 21, done.
Counting objects: 100% (21/21), done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (11/11), 1.47 KiB | 751.00 KiB/s, done.
Total 11 (delta 9), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote: NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 10.12.0
remote: engines.npm (package.json): 6.10.2
remote:
remote: Resolving node version 10.12.0...
remote: Downloading and installing node 10.12.0...
remote: Bootstrapping npm 6.10.2 (replacing 6.4.1)...
remote: npm 6.10.2 installed
remote:
remote: -----> Restoring cache
remote: - node_modules
remote:
remote: -----> Installing dependencies
remote: Installing node modules (package.json + package-lock)
remote:
remote: > python-react@0.1.0 postinstall /tmp/build_3d982eb1603cca98d4fb0a55ee743746
remote: > npm run build
remote:
remote:
remote: > python-react@0.1.0 build /tmp/build_3d982eb1603cca98d4fb0a55ee743746
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled with warnings.
remote:
...warnings
remote:
remote: Search for the keywords to learn more about each warning.
remote: To ignore, add // eslint-disable-next-line to the line before.
remote:
remote: File sizes after gzip:
remote:
remote: 524.18 KB build/static/js/2.17f36e06.chunk.js
remote: 75.89 KB build/static/css/2.cf0cc74f.chunk.css
remote: 9.41 KB build/static/js/main.1191967e.chunk.js
remote: 916 B build/static/css/main.b8ed5430.chunk.css
remote: 762 B build/static/js/runtime~main.a8a9905a.js
remote:
remote: The project was built assuming it is hosted at the server root.
remote: You can control this with the homepage field in your package.json.
remote: For example, add this to build it for GitHub Pages:
remote:
remote: "homepage" : "http://myname.github.io/myapp",
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: npm install -g serve
remote: serve -s build
remote:
remote: Find out more about deployment here:
remote:
remote: https://bit.ly/CRA-deploy
remote:
remote: audited 904172 packages in 103.782s
remote: found 0 vulnerabilities
remote:
remote:
remote: -----> Build
remote: Running build
remote:
remote: > python-react@0.1.0 build /tmp/build_3d982eb1603cca98d4fb0a55ee743746
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled with warnings.
remote:
...warnings
remote: Search for the keywords to learn more about each warning.
remote: To ignore, add // eslint-disable-next-line to the line before.
remote:
remote: File sizes after gzip:
remote:
remote: 524.18 KB build/static/js/2.17f36e06.chunk.js
remote: 75.89 KB build/static/css/2.cf0cc74f.chunk.css
remote: 9.41 KB build/static/js/main.1191967e.chunk.js
remote: 916 B build/static/css/main.b8ed5430.chunk.css
remote: 762 B build/static/js/runtime~main.a8a9905a.js
remote:
remote: The project was built assuming it is hosted at the server root.
remote: You can control this with the homepage field in your package.json.
remote: For example, add this to build it for GitHub Pages:
remote:
remote: "homepage" : "http://myname.github.io/myapp",
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: npm install -g serve
remote: serve -s build
remote:
remote: Find out more about deployment here:
remote:
remote: https://bit.ly/CRA-deploy
remote:
remote:
remote: -----> Pruning devDependencies
remote: audited 904172 packages in 12.523s
remote: found 0 vulnerabilities
remote:
remote:
remote: -----> Caching build
remote: - node_modules
remote:
remote: -----> Build succeeded!
remote: -----> Python app detected
remote: -----> Installing requirements with pip
remote:
remote: -----> $ python manage.py collectstatic --noinput
remote: 163 static files copied to '/tmp/build_3d982eb1603cca98d4fb0a55ee743746/staticfiles', 511 post-processed.
remote:
remote: -----> Discovering process types
remote: Procfile declares types -> release, web
remote:
remote: -----> Compressing...
remote: Done: 179.4M
remote: -----> Launching...
remote: ! Release command declared: this new release will not be available until the command succeeds.
remote: Released v11
remote: https://chuanshuoge-ecommerce.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
remote: Running release command...
remote:
remote: Operations to perform:
remote: Apply all migrations: admin, auth, authtoken, contenttypes, music, sessions
remote: Running migrations:
remote: No migrations to apply.
remote: Waiting for release.... done.
To https://git.heroku.com/chuanshuoge-ecommerce.git
cd76f6b..3a6cdd2 master -> master
--------------------------------------
reference:
https://simpleisbetterthancomplex.com/tutorial/2016/08/09/how-to-deploy-django-applications-on-heroku.html
https://www.codementor.io/jamesezechukwu/how-to-deploy-django-app-on-heroku-dtsee04d4
https://medium.com/@qazi/how-to-deploy-a-django-app-to-heroku-in-2018-the-easy-way-48a528d97f9c
https://devcenter.heroku.com/articles/django-app-configuration
https://chuanshuoge2.blogspot.com/2018/12/deploy-react-and-express-to-heroku.html
https://alphacoder.xyz/deploy-react-django-app-on-heroku/
https://www.youtube.com/watch?v=r0ECufCyyyw
https://librenepal.com/article/django-and-create-react-app-together-on-heroku/
https://support.dnsimple.com/articles/heroku-error-ssl/
No comments:
Post a Comment