电子商务网站 Saleor 基于 docker 的部署和配置
前言
Saleor 是一个快速发展的开源电子商务平台,基于 Python 和 Django 开发。
Saleor的特点
1.GraphQL API:基于GraphQL实现的前后端分离,属于最前沿的技术。 2.仪表板:管理员可以完全控制用户、流程和产品。 3.订单:订单、发货和退款的综合系统。 4.购物车:高级付款和税收选项,支持折扣和促销活动 5.支付:灵活的 API 架构允许集成任何支付方式。 6.地理自适应:自动支持多国家的结账体验。 7.支持云部署:支持Docker部署。 8.支持谷歌分析:集成了谷歌分析,可以很方便地分析流量去留。
核心组件
- Saleor Core
它是GraphQL API的后端服务器。基于Django开发,数据库采用了PostgreSQL并在Redis中储存了一些缓存信息。
- Saleor Dashboard
这是一个可以用来经营商店的仪表盘,它是一个静态网站,因此没有任何自己的后端代码,它是一个与Saleor Core核心服务器对话的React程序。
- Saleor Storefront
这是基于React实现的示例商店,你可以自定义这部分代码满足你自己的需求,也可以使用 Saleor SDK 构建自定义店面。
准备资源
- 一台vps主机
腾讯云中国香港节点(不用备案) 配置:2核4G内存50G硬盘5M带宽
- 一个域名 superxshop.com
部署
基本环境配置 传送门
系统基本配置,并安装docker和docker-compose
获取源码并构建
获取项目并创建
git clone https://github.com/saleor/saleor-platform.git --recursive --jobs 3
cd saleor-platform
设置变量
backend.env
DATABASE_URL=postgres://saleor:saleor@db/saleor
DEFAULT_FROM_EMAIL=service@superxshop.com
CELERY_BROKER_URL=redis://redis:6379/1
SECRET_KEY=i6uqxkqcnx6ez0xs0gym18xxhw0smls083s21hbnqwmwgt81l7
docker-compose.yml中saleor的environment变量
- STOREFRONT_URL=http://外网IP:3000/
- DASHBOARD_URL=http://外网IP:9000/
- ALLOWED_HOSTS=localhost,api,外网IP
docker-compose.yml中dashboard的build添加args
args:
API_URI: "http://外网IP:8000/graphql/"```
构建
docker-compose build
初始化
docker-compose run --rm api python3 manage.py migrate
docker-compose run --rm api python3 manage.py collectstatic --noinput
填充数据,创建管理员
docker-compose run --rm api python3 manage.py populatedb
docker-compose run --rm api python3 manage.py createsuperuser
启动
docker-compose up
调试saloer
通过浏览器访问,记得打开防火墙
'http://外网IP:8000/graphql/'
调试saleor-storefront
编辑目录下的.env文件,修改NEXT_PUBLIC_API_URI变量
NEXT_PUBLIC_API_URI=http://外网IP:/graphql/
访问
'http://外网IP:3000/'
调试saleor-dashboard
访问
'http://外网IP:9000/'
配置域名访问
使用nginx配置域名访问
worker_processes auto;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
accept_mutex on;
}
error_log /var/log/nginx/error.log notice;
http {
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main buffer=32k flush=30s;
upstream storefront {
server 172.24.44.201:3000 weight=1 fail_timeout=10s max_fails=1 ;
}
upstream dashboard {
server 172.24.44.201:9000 weight=1 fail_timeout=10s max_fails=1 ;
}
server {
server_name saleor.superxshop.com;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
listen 80;
location / {
proxy_pass http://storefront;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cookie_path / "/; httponly; secure; SameSite=Lax";
}
}
server {
server_name sadmin.superxshop.com;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload";
listen 80;
location / {
proxy_pass http://dashboard;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-Port $server_port;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cookie_path / "/; httponly; secure; SameSite=Lax";
}
}
}
FAQ
react启动报错
react项目启动报错:Error: ENOSPC: System limit for number of file watchers reached
修改方法
- 修改 /etc/sysctl.conf
fs.inotify.max_user_watches=524288
- 使配置生效
sysctl -p
Invalid Host header报错
dashboard配置域名后出现nginx
解决办法
## npm启动添加参数
npm start -- --host 0.0.0.0 --disableHostCheck=true
本文共 382 个字数,平均阅读时长 ≈ 1分钟