Gatsby静态应用在云服务器上搭建运行
Gatsby静态应用在云服务器上搭建运行
Gatsby 是一个为 React 打造的快如闪电的现代化站点生成器
准备工作
本地开发环境
安装 Node.js；
安装 Git；
Gatsby 开发环境
Gatsby 的 CLI 工具非常方便，在终端全局安装 gatsby-cli
npm install -g gatsby-cli 新建项目
切换到开发目录 gatsby new ，然后设置项目名称，例如 site ，选择起始模板 starter。这里的https链接，可以是github 任意仓库地址。
gatsby new learn-gatsby https://github.com/gatsbyjs/gatsby-starter-default 启动
# 两种启动方式（开发模式）
npm run develop
gatsby develop 常用命令
# 默认端口是8000，可自定义端口启动
PORT=8001 npm start
# 编译发布
gatsby clean
gatsby build 其他新建网站的方法
除了上面创建基础网站的方式，还能新建一些有基本功能的网站。
1、Gatsby’s default starter
1、新建项目
gatsby new learn-gatsby https://github.com/gatsbyjs/gatsby-starter-default
2、启动
cd learn-gatsby gatsby develop
3、访问方式与上面一样
gatsby-starter-default - 官方说明 2、gatsby-starter-blog gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog gatsby-starter-blog - 官方说明 3、gatsby-starter-hello-world gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world gatsby-starter-hello-world - 官方说明 4、gatsby-starter-blog-theme gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme gatsby-starter-blog-theme - 官方说明 5、gatsby-starter-theme-workspace gatsby new my-theme https://github.com/gatsbyjs/gatsby-starter-theme-workspace gatsby-starter-theme-workspace - 官方说明
Linux配置Nginx
安装Nginx
sudo yum install -y nginx 安装node.js
sudo yum -y install nodejs 设置应用静态页面路径
mkdir /www/wedding/public 配置Ngnix
vim /etc/nginx/nginx.conf 配置文件主要修改以下内容：
配置HTTPS
这里ilovezaq.top_bundle.pem和/ilovezaq.top.key文件，从域名服务商网站的SSL服务里下载。
server {
listen 443;
server_name ilovezaq.top;
ssl on;
ssl_certificate /root/cert/ilovezaq.top_bundle.pem;
ssl_certificate_key /root/cert/ilovezaq.top.key;
location / {
root /www/wedding/public/;
index index.html index.htm;
}
} 配置HTTP
server {
listen 80;
listen [::]:80;
root /www/wedding/public/;
server_name ilovezaq.top;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
} 启动Nginx
cd /etc/nginx/sbin 启动命令： ./nginx 或者 sudo systemctl start nginx
重启命令： ./nginx -s reload 或者 sudo systemctl reload nginx
结束命令： ./nginx -s quit 部署项目
这里使用XFTP将编译好的public文件夹下的内容全部复制到/www/wedding/public/路径下即可。
浏览器访问对应域名，即可进入站点。
这里也可以通过git将本地文件协同上传到/www/wedding/public/文件夹下，具体方式可查找相关git hook 相关资料。