[Day 003]一个简单的偏前端网站架构搭建Apple的App Store上架应用需要开发者站点、技术支持和隐私策略几

Apple的App Store上架应用需要开发者站点、技术支持和隐私策略几个页面，今天我们来搭建一个简单的偏前端技术栈的网站。

网站部署在云服务器上，使用nginx来部署前端静态资源并将接口调用反向代理到我们的后端服务上。

前端使用create-react-app开发，通过ci/cd实现每次push代码自动构建并将打包产物部署到nginx上，后端服务使用egg.js开发。

后续如果前端部分开始庞大起来，再考虑调整架构去适应需求。

服务器

服务器使用了aliyun上的ecs，2核4g centos 7.9

Nginx

Nginx是一个非常轻量的服务器，反向代理和负载均衡都是比较实用的功能。我们的站点体量还很小，负载均衡我们先不考虑，只使用到反向代理

另外现在已经2202年了，https肯定还是要的！

安装

在官网下载最新版Stable包nginx: download
安装依赖环境

yum install gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-devel -y

解压源码包

tar -zxvf nginx-1.23.1.tar.gz

mkdir /var/temp/nginx -p

bash ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

编译，安装

make 
make install

默认安装在/usr/local/nginx

7.将/usr/local/nginx/sbin目录添加到$PATH

可选，可以用自己熟悉的方式添加

8.nginx常用命令

#启动：
nginx
#停止：
nginx -s stop
#安全退出
nginx -s quit
#重新加载 (修改配置后常用)
nginx -s reload

9.配置

Nginx的配置文件在path_to_nginx/nginx/conf/nginx.conf

基本配置：

网站根目录我们会放在html下的main-site中，这里修改下location / 的配置

location / {
    root   html/main-site;
    index  index.html;
}

/api前缀的访问我们需要反向代理到后端服务上

location /api {
    proxy_pass http://47.110.59.57:7000;
}

https配置：

首先需要一个ssl证书，这里我用的是阿里云的免费证书

下载证书获得了一个.pem证书文件和一个.key私钥文件

将两个文件上传到服务器的nginx目录下的conf/cert目录中

将server的监听端口改为443 端口后加上ssl

配置好自己的server_name和证书、密钥的文件路径

再加上几个https需要的字段即可

server {
    listen       443 ssl;
    server_name  www.wssssh.com;

    ssl_certificate cert/8160443_www.wssssh.cn.pem;  
    ssl_certificate_key cert/8160443_www.wssssh.cn.key;


    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #表示使用的加密套件的类型。
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; #表示使用的TLS协议的类型，您需要自行评估是否配置TLSv1.1协议。
    ssl_prefer_server_ciphers on;
...

配置http跳转到https：

添加一个server，rewrite到https

server {
        listen 80;
        server_name www.wssssh.com; #需要将yourdomain替换成证书绑定的域名。
        rewrite ^(.*)$ https://$host$1; #将所有HTTP请求通过rewrite指令重定向到HTTPS。
        location / {
            index index.html index.htm;
        }
    }

到这里nginx就配置好了，接下来我们来做前端的自动化部署。

前端

也是由于体量小，没有复杂需求，这里我们直接使用create-react-app做一个简单的前端，这里我简单分享一下使用coding实现的自动化部署。

整个自动化部署的流程大概是：

代码push触发持续集成的构建计划
使用持续集成的构建计划用coding的节点进行前端内容的build并打包上传到coding的制品库
制品库的新制品触发持续部署的主机部署
主机部署使用我们的机器作为堡垒机和目标主机，拉去制品解包并放到nginx的html/main-site目录下

整个流程持续集成build平均耗时2分钟，部署平均15s。

coding的节点每月又1000分钟的免费时间可以用，还是挺良心的，大约可以支持这个项目每月发布500次

coding中新建项目，代码仓库，使用create-react-app初始化项目
在制品管理中创建一个制品仓库
在持续集成中新建构建计划，使用coding的节点池进行构建，构建计划的配置如下

基础信息

流程配置

#流程配置：
pipeline {
  agent any
  stages {
    stage('Node.js') {
      steps {
        sh 'rm -rf /usr/lib/node_modules/npm/'
        dir('/root/.cache/downloads') {
          sh 'wget -nc "https://coding-public-generic.pkg.coding.net/public/downloads/node-linux-x64.tar.xz?version=v16.13.0" -O node-v16.13.0-linux-x64.tar.xz | true'
          sh 'tar -xf node-v16.13.0-linux-x64.tar.xz -C /usr --strip-components 1'
        }

        sh 'node -v'
      }
    }
    stage('检出') {
      steps {
        dir('~/') {
          echo 'hello CODING'
        }

        checkout([
          $class: 'GitSCM',
          branches: [[name: GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: GIT_REPO_URL,
            credentialsId: CREDENTIALS_ID
          ]]])
          dir('./main-site-fe') {
            echo '变更到仓库目录'
          }

        }
      }
      stage('构建') {
        steps {
          echo '构建中...'
          sh '''yarn
yarn build'''
          echo '构建完成.'
          sh 'tar -cvf build.tar build'
          archiveArtifacts(artifacts: 'build.tar', fingerprint: true, allowEmptyArchive: false)
        }
      }
      stage('部署') {
        steps {
          echo '开始上传到制品库...'
          codingArtifactsGeneric(files: 'build.tar', repoName: 'fe-build')
          echo '上传到制品库完成'
        }
      }
    }
  }