pancakeswap 前端源码编译及部署-linux

相关信息

• pancakeswap相关项目github地址：https://github.com/pancakeswap
• pancakeswap前端源码github地址：https://github.com/pancakeswap/pancake-frontend

一、源码编译环境部署 1.1 yarn部署

• 安装源配置

wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo

• 安装yarn

yum install yarn -y

• 查看版本

yarn --version

1.2 nodejs 部署

• 下载nodejs二进制包

wget https://nodejs.org/download/release/v12.20.0/node-v12.20.0-linux-x64.tar.xz

• 解压压缩包

tar xvf node-v12.20.0-linux-x64.tar.xz

• 更改包名

mv node-v12.20.0-linux-x64 /usr/local/nodejs

• 添加环境变量

# vim /etc/profile
#nodejs
export NODE_HOME=/usr/local/nodejs
export PATH=$NODE_HOME/bin:$PATH

• 生效环境变量

source /etc/profile

• 验证nodejs是否部署成功

# node -v
v12.20.0

# npm -v
6.14.8

1.3 安装git

• 安装git

yum -y install git

• 查看版本

# git version
git version 1.8.3.1

二、pancakeswap 前端源码编译 2.1 下载pancakeswap前端源码

• 下载pancakeswap前端源码压缩包

https://github.com/pancakeswap/pancake-frontend/archive/refs/heads/master.zip

• 解压pancakeswap前端源码压缩包

unzip master.zip

2.2 编译pancakeswap前端源码

• 进入pancakeswap前端源码文件夹

# cd pancake-frontend-master/
# ls
CONTRIBUTING.md  crowdin.yml  cypress  cypress.json  doc  LICENSE  netlify.toml  package.json  public  README.md  scripts  src  static.json  tsconfig.json  yarn.lock

• 初始化git

git init

• 安装所有的依赖包

yarn

• 项目下多了node_modules依赖包

# ls
CONTRIBUTING.md  crowdin.yml  cypress  cypress.json  doc  LICENSE  netlify.toml  node_modules  package.json  public  README.md  scripts  src  static.json  tsconfig.json  yarn.lock

• 项目打包

npm run build

• 编译后的静态页在build中

# ls
build  CONTRIBUTING.md  crowdin.yml  cypress  cypress.json  doc  LICENSE  netlify.toml  node_modules  package.json  public  README.md  scripts  src  static.json  tsconfig.json  yarn.lock

三、编译报错解决 3.1 git未安装

• 报错内容：

Couldn't find the binary git

• 报错原因：没有安装git
• 解决方法:

yum -y install git

3.2 nodejs版本低

• 报错内容:

error extract-files@9.0.0: The engine "node" is incompatible with this module. Expected version "^10.17.0 || ^12.0.0 || >= 13.7.0". Got "10.12.0"
error Found incompatible module.

• 报错原因：nodejs版本低
• 解决方法：将node升级至符合以下版本即可,个人本次使用版本为：v12.20.0

^10.17.0 || ^12.0.0 || >= 13.7.0

3.3 git没有初始化

• 报错内容:

fatal: Not a git repository (or any parent up to mount point /opt)

• 报错原因：git安裝后没有初始化
• 解决方法：初始化git

git init

3.4 git无法被找到

• 报错内容:

.git can't be found (see https://git.io/Jc3F9)
error Command failed with exit code 1.

• git无法被找到
• 解决方法：在源码文件夹路径下初始化git

# git init
Initialized empty Git repository in /opt/tools/pancake-frontend-master/.git/

四、部署pancakeswap前端网页 4.1 下载nginx镜像

docker pull nginx:1.17.9

4.2 新建nginx挂载目录

mkdir -p /opt/docker/nginx/{conf,html,logs,cert}

4.3 编写nginx容器启动脚本

# pwd
/opt/docker/nginx

# vim run.sh 
#!/bin/bash

docker run -itd --restart=unless-stopped \
 -v /etc/localtime:/etc/localtime \
 -v /etc/timezone:/etc/timezone \
 --network=host \
 --name nginx \
 -v /opt/docker/nginx/html:/usr/share/nginx/html \
 -v /opt/docker/nginx/logs:/var/log/nginx \
 -v /opt/docker/nginx/cert:/etc/nginx/cert \
 -v /opt/docker/nginx/nginx.conf:/etc/nginx/nginx.conf \
 -v /opt/docker/nginx/conf:/etc/nginx/conf.d \
 nginx:1.17.9

docker logs -f nginx

4.4 编写nginx主配置文件

# pwd
/opt/docker/nginx

# vim nginx.conf
worker_processes  4;
user  nginx;
#pid /opt/app/nginx/sbin/nginx.pid;
events {
    worker_connections  409600;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    server_tokens  off;
    autoindex on;
    autoindex_exact_size off;
    autoindex_localtime on;
    keepalive_timeout  65;
    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;
    error_log  /var/log/nginx/error.log  error;
    include /etc/nginx/conf.d/*.conf;
}

4.5 將编译好的pancakeswap前端静态页放到nginx项目目录下

# mkdir /opt/docker/nginx/html/pancakeswap -p
# cd /opt/docker/nginx/html/pancakeswap
# cp /opt/tools/pancake-frontend-master/build/* ./ -rf

# ls
asset-manifest.json  favicon.ico  googlefddf3c367e79f9e2.html  images  index.html  locales  logo.png  manifest.json  _redirects  robots.txt  static  swap.mp3

4.6 编写域名conf文件

# pwd
/opt/docker/nginx/conf

# vim www.pancakeswap.com.conf

server {
        listen       80;
        server_name www.pancakeswap.com;
        rewrite ^ https://$http_host$request_uri? permanent;
        server_tokens off;
    }
server {
        listen 443 ssl;
        server_name  127.0.0.1;
        ssl_certificate   /etc/nginx/cert/xxx.com.pem;
        ssl_certificate_key  /etc/nginx/cert/xxx.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        charset utf-8;
        location / {
            root /usr/share/nginx/html/pancakeswap;
            index  index.php index.html index.htm;
        }
        access_log /var/log/nginx/www.pancakeswap.com.log;
    	error_log /var/log/nginx/www.pancakeswap.com.log;
}

4.7 启动容器，访问网页