RN_Expo云端开发_服务器部署（1）

2018-11-27 本文已影响0人 Edward_WLY

$\color{red}{Tip:使用"Ctrl+F",在搜索框中输入问题}$

前言

本节将会介绍expo在服务端的应用。使用expo进行RN应用的开发有以下优点：功能丰富，应用程序不需要下载额外的安装包，动态热更新，方便展示等等。但是唯一的不足是，应用搭建后的url都会部署在国外的服务器上，不会科学上网的小伙伴打开起来十分不方便，本节将会介绍如何利用云服务器在expo下搭建RN的开发环境。并在后续章节介绍如何多端远程协作。

一、环境搭建

参考资料:

React Native中文官网
(官方文档经历过一次更新，目前中文文档比较详细，推荐阅读)

安装清单:

(Required)
云服务器（ubuntu 16.0.4）：云服务器的内存不需要特别大。ps:各个云服务器平台都有对应的校园学生活动，购买学生机特别实惠，各个平台的云服务器性能上稍微有点区别，总体上没有太大出入，这里不做推荐。
expo：expo是一组工具，库和服务,可以理解为react-native的超集，其SDK是一个native-and-JS库，可以访问设备的系统功能(如相机，联系人，本地存储和其他硬件)，是目前官方推荐的构建工具。
expo-cli：expo的命令行环境，使用expo-cli,可以在命令行下快速的构建和调试RN应用。

(Optional)
nvm：nvm是一款node的版本管理工具，使用起来十分便捷Yarn：facebook推出的npm的替代版，下载module的速度比npm快

步骤1：配置云服务器ssh连接以及root登录

步骤2.1：下载node和npm

使用apt-get install指令进行下载

apt-get install nodejs-legacy
apt-get install npm //不同于window下的安装，`npm`模块需要单独下载

使用 -v指令查看是否下载成功

node -v
npm -v

node版本号v4.2.6,npm版本号3.5.2

root@Edward:/# node -v
v4.2.6
root@Edward:/# npm -v
3.5.2

此外需要配置下npm的镜像，加快npm的下载速度

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

步骤2.2: 使用nvm进行node的版本控制(可选）

在步骤2.1中，可以发现使用apt-get install下载的node版本非常低，目前最新的版本已经到了11.2.0,如果对使用了一些第三方的库，这些库对node的版本有要求的话，这里我们需要使用nvm来进行node的下载和版本管理控制

使用curl指令下载nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

使配置文件生效

source ~/.bashrc

下载指定版本的node,这里选择的是LTS 10.13.0

nvm install -v 10.13.0

再使用node -v，npm -v查看安装版本,同时可以发现npm的版本也发生了改变，这是因为

较新版本的node内置了npm模块

root@Edward:~# node -v
v10.13.0
root@Edward:~# npm -v
6.4.1

nvm的使用方法

nvm --help //可以查看所有关于nvm的命令

nvm install v10.13.0 安装指定版本的node
nvm use v10.13.0 使用指定版本的node
nvm alias default v10.13.0 指定默认的node版本
nvm list 查看nvm相关的配置信息

步骤3：安装expo-cli

npm install -g expo-cli

注: -g 这个参数表示将module下载到全局，默认不加，表示下载到本地，表示当前这个模块只能应用于当前目录项目。

步骤4-1：初始化RN项目

expo init RNDemo

此处会有模板选择,回车选择blank即可。

步骤4-2：运行RN项目

cd RNDemo //进入项目目录
expo start //启动项目，expo start可以用npm start代替,但最后执行的依旧是expo start

可以看到服务器启动，并显示项目对应的二维码，在客户端上下载对应的expo软件进行扫描便可以加载RN应用

二维码.png

步骤4-3：下载对应的Expo客户端

如果expo init没有指定RN的版本的话，对应的expo sdk的版本也将会是最新的，因此需要下载最新的expo客户端
链接1：Expo官网下载地址
 链接2：CSDN下载expo客户端

下载.png

步骤4-4：客户端连接服务器下载jsbundle

方式一：Scan QR Code 由于此处默认的服务器地址为内网地址如果服务器跟手机能够处于同一局域网的话可以直接使用相机扫描上面的二维码即可，否则需要对expo进行配置
方式二：Explore 手动输入服务器的ip(公网或者内网),若服务器有公网地址，则推荐使用这种方式，点击下方的Explore在搜索栏中输入exp://公网ip:19000,默认端口为19000

l连接服务器.png
输入公网或者内网ip.png

步骤4-5：浏览器上查看调试情况

使用浏览器打开步骤4-4中输入的url,将后面的端口由19000替换成19002，便可以看到对应的控制台输入

浏览器查看控制台输出.png

小结

本节讲述了怎么在云服务上搭建RN的基本环境，下一节将会讲解怎么在本地搭建开发环境，远程修改服务端代码。