Ant Design Pro发布到nginx服务器

编程之家收集整理的这篇文章主要介绍了Ant Design Pro发布到nginx服务器编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ant Design Pro的project发布到Nginx服务器

前端小白一个,在WebStorm里面玩的不亦乐乎,当想要把网站部署到服务器上时,一脸懵逼.jpg,于是开始填坑之旅。。。。。。
为防止不必要的麻烦,其实是想省钱,我先打算用虚拟机安装Nginx,看看在虚拟机上能不能行,然后再说阿里云的ECS。

1.npm run build

将前端project执行npm run build命令,antd脚手架帮我们简化了一大波,一行命令完事。执行完的dist文件夹才几MB。之前我还想是不是要把整个project带上node_modules都1个多G的文件都传到服务器上((lll¬ω¬)…)

2.Centos安装Nginx

听说最近百度评价急剧下降,所以咱们到Googel上找教程(滑稽)。
1.将Nginx放到yum repro库中
rpm -ivh http://Nginx.org/packages/centos/7/noarch/RPMS/Nginx-release-centos-7-0.el7.ngx.noarch.rpm
2.查看Nginx信息 yum info Nginx
3.使用yum安装ngnix yum install Nginx
4.启动Nginx service Nginx start
5.访问Nginx curl -i localhost或者在浏览器上输入localhost或者ip
到这里如果能显示,就很舒服了。显示不了页问题不大。首先,关闭服务器防火墙,systemctl stop firewalld.service ,或者这个重启页不用再关闭systemctl disable firewalld.service 。然后再使一波。
有个就问题不大了。

3.前端显目部署

将dist文件夹送到服务器随便一个地方,我是/usr/share/Nginx/,就是Nginx默认开启页面的隔壁。然后修改Nginx配置文件
1.vim /etc/Nginx/Nginx.conf,然后搞成这样

user  root;    # 这里要修改
worker_processes  auto;

error_log  /var/log/Nginx/error.log warn;
pid        /var/run/Nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/Nginx/mime.types;
    default_type  application/octet-stream;

    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;

    sendfile        on;
    tcp_nopush     on;
    tcp_nodelay    on;
    keepalive_timeout  65;

    gzip  on;

    include /etc/Nginx/conf.d/*.conf;
}

2.vim /etc/Nginx/conf.d/default.conf,搞成这样。这边可以参考antd官网的doc https://pro.ant.design/docs/deploy-cn

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-PHP image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/Nginx/dist;

    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/ /index.html;
        # 如果有资源,建议使用 https + http2,配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

    }
    location /api {
        proxy_pass https://preview.pro.ant.design;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

然后重启Nginx服务。service Nginx restart。浏览器访问ip:80。镐腚。
ECS…再说
这边都改完后可能会出现403。有三个原因,要么dist里面没有index,要么是用户给没有权限访问dist,要么是SELinux的问题。我刚好是第三个,运气好的么就不谈了…参考这里 https://my.oschina.net/angerbaby/blog/738652

参考

  1. 构建和发布 https://pro.ant.design/docs/deploy-cn
  2. centos7安装Nginx的两种方法 https://www.jianshu.com/p/96691511295f
  3. 安装Nginx 在 CentOS 7 http://blog.51cto.com/cantgis/1540004
  4. 前端部署服务器小结 https://juejin.im/post/5b42f77ce51d451923443220#/admin/addArticle/_blank
  5. ubuntu16.04下Nginx的基础配置教程 https://segmentfault.com/a/1190000009514737
  6. Ant Design Pro Nginx配置 https://www.liangjucai.com/article/311
  7. 启动Nginx后请求资源403解决方案总结 https://my.oschina.net/angerbaby/blog/738652
  8. Nginx重启几种方法 https://blog.csdn.net/zqinghai/article/details/71125045

总结

以上是编程之家为你收集整理的Ant Design Pro发布到nginx服务器全部内容,希望文章能够帮你解决Ant Design Pro发布到nginx服务器所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章

猜你在找的Nginx相关文章

摘要: 什么是负载均衡?通俗一点讲,就是在高并发、大数据环境下给服务器减压的技术。负载均衡是任何一个有一定规模的互联网企业都会考虑的问题,负载方式很多,有依靠硬件实现的,也有依靠软件实现负载的。今天来聊聊使用软件来负载的方式。什么是负载均衡?通俗一点讲,就是在高并发、大数据
说明:此脚本简单只适合centos系统,仅作参考#!/bin/bash#判断系统类型是否为centosSERVER_NAME='CentOS'OS_SERVER_NAME=$(hostnamectl|awk'NR==7{print$3}')echo"$OS_SERVER_NAME"["$SERVER_NAME"!="$OS_SERVER_NAME"]&&
nginx静态文件二级目录 location 可以看出根目录下还得建立一个根目录相同的文件夹
前言:本文章适合有Linux基础者阅读,需掌握源码方式安装nginx(文中作者直接省略了nginx的源码安装过程)1.当前系统环境系统主机名IP地址Centos7.4xmh10.0.0.2002.nginx版本当前版本:nginx-1.12.2新版本:nginx-1.14.2本文章使用源码包方式安装nginxnginx存放:/applicat
安装Nginx#apt-getinstallnginx#yuminstallnginx查看安装路径#whereisnginx配置nginxlocation~.*\.(gif|jpg|jpeg|png)${expires24h;root/data/www/images/;#指定图片存放路径access_log/data/www/imagesginx/logs
80端口:server{listen80;#listen[::]:80;server_name域名;indexindex.htmlindex.htmindex.phpdefault.htmldefault.htmdefault.php;root/home/wwwroot/aaa;includenone.conf;#error_page
Nginx工作模式简介nginx有两种工作模式:master-worker模式和单进程模式。在master-worker模式下,有一个master进程和至少一个的worker进程,单进程模式顾名思义只有一个进程。这两种模式有各自的特点和适用场景。Nginx两种工作模式1、master-worker模式master-worker模式下nginx启
命令列表先把所有的命令给出来了。yum-yinstallgcc-c++yum-yinstallwgetyuminstall-ypcrepcre-develyuminstall-yzlibzlib-develyuminstall-yopensslopenssl-develwget-chttps:/ginx.org/downloadginx-1.14.1.tar.gztar-zxvfnginx-1.14.1.tar.gz