脚把脚 0到1部署React项目至阿里云服务器

真·小白从0到1部署React项目至阿里云服务器购买阿里云服务器安装Nginx服务器软件打包React项目修改Nginx的默认配置配置安全组访问项目
网上看了好多好多关于从购买阿里云服务器到最后部署成功React项目的博客,看的眼花缭乱然鹅…对博主而言好像并没有什么X用,这篇博客的流程对于博主本人呢是很有用滴~希望可以帮到点开来看到的你鸭!

购买阿里云服务器

购买阿里云服务器的话,学生党是可以白嫖一个月的

    首先显示进入阿里云的官网,点击这里进入阿里云官网。然后就注册啊啊啊啊啥的
    登录成功后学生党是可以白嫖一个月的,需要找到云翼计划,不过博主没有找到,所以大家直接点击这里就可以直接进入云翼计划的网站了.
    找到这个,选择免费试用就好了!记住选择CentOs的系统,因为博主后面的操作都是基于这个系统的。配置的话,也没什么注意的网上好多博客(?头)而且都是一整套操作很简单的
    脚把脚 0到1部署React项目至阿里云服务器
    之后进入阿里云官网,登陆后点击控制台
    脚把脚 0到1部署React项目至阿里云服务器
    点击云服务器ESC,你可能是别的,反正就是点这里进入服务器管理就?
    (看到物联网平台想到自己小学期还没弄完,抹泪ing)
    脚把脚 0到1部署React项目至阿里云服务器
    选择实例,即可进入服务器啦!
    脚把脚 0到1部署React项目至阿里云服务器

安装Nginx服务器软件

    由于我们选择的是Centos的服务器,所以需要使用终端进行连接。博主是进行前端开发,所以可以使用vscode里面的终端进行与服务器的远程连接,但是博主推荐使用PoweShell

使用vscode打开powershell

按住 Ctrl+Shift+P 选择默认选怎Shell,选择PowerShell就可以
脚把脚 0到1部署React项目至阿里云服务器

使用终端打开PowerShell

进入文件夹,按住 Shift 右击鼠标,选择在此处打开PowerSehll窗口就可以了

    打开之后输入命令 ssh root@ip 其中root是你的用户名,win系统默认是administor,而Linux系统默认是root,ip是你的服务器公网地址
    脚把脚 0到1部署React项目至阿里云服务器
    然后输入密码,密码是自己设置的。选择密码/钥匙,选择修改远程连接(VNC)密码即可脚把脚 0到1部署React项目至阿里云服务器
    使用ssh连接后输入密码,连接成功应该出现下图
    脚把脚 0到1部署React项目至阿里云服务器
    然后就需要安装Nginx了,输入以下命令即可
// 1. 下载ngin依赖
wget http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 2. 安装依赖
rpm -ivh nginx-release-centos-7-0.el7.ngx.noarch.rpm
// 3. 安装nginx
yum install nginx
// 4. 启动并开机自启动
systemctl start nginx.service
systemctl enable nginx.service

如果是ubuntu系统,请点击这里

    最后当你在浏览器输入你的服务器公网IP时候可以看到Nginx的欢迎界面就可以了:
    脚把脚 0到1部署React项目至阿里云服务器

打包React项目

    进行完上述操作,服务器基本配置就完成了,然后进行React项目的打包。进入项目目录后执行命令
yarn build

注意:如果你的项目使用了antd后,这样打包部署完成后,访问项目是无法看到Antd的所有样式和动画,因此需要进行以下步骤在进行打包
1. 安装 babel-plugin-import

yarn add  babel-plugin-import

2. 在package.json中配置,这种方法成功的前提是webpack里query下配置babelrc:true, 这样就会使用babelrc文件中的配置

"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}

    项目打包好之后应该把 build 目录传至服务器中。博主使用的是PowerShell的 scp,具体使用方法点击这里
    注意:很多时候PowerSehll是不能识别目录途径,博主使用了git-bash!!!!亲测可用!!!速度还很快!!!用起来兄弟萌!!!

修改Nginx的默认配置

    首先通过这个命令找到nginx配置文件地方:
nginx -t

    我的返回结果如下:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

    进入 nginx.conf 这个目录有两个比较关键的文件夹
nginx.conf,这是一个主配置文件
conf.d,这是一个文件夹,里面包含着服务器的独立的配置文件

    因此打开conf.d,在里面创建服务器配置文件builder.conf(前缀自己定):
server {
listen 80;
server_name 47.98.xxx.xxx;(自己的服务器IP)

location / {
root /usr/project/webbuilder/build;
index index.html index.htm;
}
}

    配置好之后,重载一下nginx配置
nginx -s reload
systemctl stop nginx
systemctl start nginx

配置安全组

    进入服务器管理平台,进入安全组额
    脚把脚 0到1部署React项目至阿里云服务器
    选择配置规则
    脚把脚 0到1部署React项目至阿里云服务器
    新增如下规则。因为在配置文件中,我们监听的是80端口号
    脚把脚 0到1部署React项目至阿里云服务器

访问项目

打开浏览器输入公网地址就可以访问到项目啦!!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

脚把脚 0到1部署React项目至阿里云服务器

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 脚把脚 0到1部署React项目至阿里云服务器
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏