React全家桶建站教程-发布 #10

简介: React全家桶建站教程-发布 #10

购买机器


  • 这里以阿里云机器为例,其他云的机器也没问题,注意是CentOS系统即可。
  • 如果没有机器的话,请购买。有机器请略过,直接往下看。

  • 云盘:默认高效云盘40G
  • 下一步,默认配置,确认订单即可。
  • 等待个15分钟左右,系统给你分配机器。

配置


  • 修改密码
    接着进入机器,选择实例。
    然后点击管理。
    修改密码在基本信息->更多->修改密码
  • 配置安全组 点击本实例安全组,默认有一个安全组

    点击配置规则。

    点击右上角的快速创建规则,配置-1、80、22端口
    22 ssh访问机器的端口
    80 让你的ip地址可以通过http访问
    -1 代表不限制端口

登录


通过机器公网ip和密码进行访问,访问成功之后会有上图提示。


安装


CentOS自带yum命令,非常方便使用。

//安装nginx

//安装上传下载命令。

//安装解压和压缩命令

//安装nodejs和npm

//安装git管理工具,会提示是否正确,选y

查看安装版本


v9.4.0


5.6.0


nginx version: nginx/1.12.2$ yum install nginx$ yum install -y lrzsz$ yum install -y unzip zip$ yum install -y nodejs$ yum install git# node -v# npm -v# nginx -v


打包和上传


1、https://github.com/xuya227939/ak47 前端案例,可以直接打包的。,打包,会生成一个build文件夹,压缩这个文件夹。

这个文件夹存放了静态页面和js

不想这么麻烦的话,这里提供了压缩包

https://github.com/xuya227939/blog/tree/master/examples/build

2、上传到服务器

我是放在这个文件夹中,如果没有的话, 进入根目录,,,, 上传文件夹

3、解压

上传之后,你的结构应该看起来像上图的样子。

通过unzip 解压文件$ npm i$ npm run build$ cd /data/sight$ cd /$ mkdir data$ cd /data$ mkdir sight$ rz$ unzip build.zip


Nginx配置


$ cd /etc/nginx进入nginx目录

清空nginx.conf的配置

如果没有vim命令,安装一下

写入以下配置$ echo ''-> nginx.conf$ vim nginx.conf$ yum install vim

user nginx;
worker_processes auto;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;
events {
  worker_connections 1024;
}
http {
  gzip on;
  gzip_min_length 1k;
  gzip_buffers   4 16k;
  gzip_comp_level 2;
  gzip_types   text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/jpg image/gif image/png;
  gzip_vary on;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
  sendfile            on;
  tcp_nopush          on;
  tcp_nodelay         on;
  keepalive_timeout   65;
  types_hash_max_size 2048;
  include             /etc/nginx/mime.types;
  default_type        application/octet-stream;
  include /etc/nginx/conf.d/*.conf;
  server {
    listen       80 default_server;
    server_name  localhost;
    root         /data/sight/build;
    include /etc/nginx/default.d/*.conf;
    access_log  /data/logs/access.log  main;
    error_log /data/logs/error.log;
    index index.html index.php;
    location ~ .*\.(gif|jpg|png|jpeg)$ {    
      access_log on;
      expires 30d;    
      root /data/images/;#指定图片存放路径    
      client_max_body_size    10m;    
      client_body_buffer_size 1280k;
    } 
    location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
      access_log off;
      expires max;
    }
    location / {
      root /data/sight/build;
      try_files $uri /index.html;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host $host;
      index index.html index.htm index.php;
    }
    error_page 404 /404.html;
      location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }
}


启动nginx


$ service nginx start重定向到 /bin/systemctl start nginx.service 提示这个,代表成功。

然后访问下你的公网IP,试试?

出现这个,就代表发布成功啦!!!


注意


每次修改完nginx.conf文件之后,都需要重启才可以生效噢。

$ service nginx restart


问题处理


结语


是不是感觉到非常简单?

目录
相关文章
|
5月前
|
前端开发 JavaScript API
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
中国农村大学生学习了这个【React教程】迎娶导师女儿,出任CEO走上人生巅峰
37 0
|
11月前
|
缓存 移动开发 JavaScript
React全家桶建站教程-Redux&Saga #7
React全家桶建站教程-Redux&Saga #7
65 0
|
11月前
|
前端开发
React全家桶建站教程-Router #6
React全家桶建站教程-Router #6
52 0
|
11月前
|
JavaScript 前端开发
React全家桶建站教程-Webpack #5
React全家桶建站教程-Webpack #5
75 0
|
11月前
|
前端开发
React全家桶建站教程-React&Ant #4
React全家桶建站教程-React&Ant #4
64 0
|
11月前
|
弹性计算 前端开发 应用服务中间件
React全家桶建站教程-Nginx #3
React全家桶建站教程-Nginx #3
94 0
|
11月前
|
开发框架 JavaScript 前端开发
React全家桶建站教程-Express #2
React全家桶建站教程-Express #2
92 0
|
11月前
|
缓存 JavaScript 前端开发
|
12月前
|
资源调度 JavaScript 前端开发
React系列教程(4)React Redux快速入门(下)
React系列教程(4)React Redux快速入门(下)
55 0
|
4月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
107 0