前端项目部署到阿里云

由于本人是个前端这里只介绍前端项目的部署(后台的部署见下一篇)

准备工作

下载两个软件Xshell和Xftp(也可以使用WinSCP;我使用的是windows系统)
购买阿里云,看需要选配置吧,系统一般选UbuntuCentOS;我选的是Ubuntu

登录阿里云

点击控制台
在这里插入图片描述
点击左侧【云服务器ECS】—>[实例]
在这里插入图片描述
注意下图-标记的地方
在这里插入图片描述
是你登录阿里云的域名

使用Xshell

打开软件新建会话(点击左侧的绿色的加号)
在这里插入图片描述
主机就是刚开始划线的地方。
然后登录需要输入用户名和密码
如果忘了见下图(反正我是忘了一次)
在这里插入图片描述
实例里面有个更多;里面有修改的地方。
登录成功之后,你可以看到
在这里插入图片描述
然后就可以开启你的配置工作了。
这里可以使用Xftp来看远程服务器的文件,当然也可以修改。点击下图标注的地方就好了。
在这里插入图片描述

安装工具

Linux安装软件的有很多种方法;

  • yum
  • rpm
  • 源码安装
  • apt
    等等…(详细内容请自行百度)
    其中apt和rpm是linux系统本身就拥有的。

安装web应用服务器

现在主流的是tomcatnginx
本人安装的是nginx;现在开始重头戏,也就是坑最多的安装nginx遇到的那些问题。
现在安装nginx

apt install nginx

如果安装不成功,下面的错误
在这里插入图片描述
更新一下apt

apt-get update

然后再一次安装nginx;

nginx -v

在这里插入图片描述
证明安装成功

启动

nginx -s reload

这是在浏览器输入阿里云的ip地址,显示如下页面
在这里插入图片描述
证明nginx安装成功。

配置 nginx

ubuntu安装Nginx之后的文件结构大致为:

  所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经安排在了/etc/nginx/sites-available下

  启动程序文件在/usr/sbin/nginx

  日志放在了/var/log/nginx中,分别是access.log和error.log

  并已经在/etc/init.d/下创建了启动脚本nginx

  默认的虚拟主机的目录设置在了/usr/share/nginx/www
nginx -h

显示nginx安装的位置和配置文件位置
在这里插入图片描述
找到nginx.config这个配置文件,进行编辑,将下面的代码段放入到nginx.config文件中,刷新一下。

server {
        listen       80;
        server_name  localhost;
	#server_name  http://47.97.204.83;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/sixiucheng/codes/dist;
            # 存放文件的地址
	    try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

        location @router {
            rewrite ^.*$ /index.html last;
        }
		# 单页应用router设置
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
   }

如果刷新没有效果,
一、试着找找有没有nginx.conf.default文件,nginx启动时一直执行nginx.conf.default这个配置文件,所以一直显示上图那个页面。删除这个文件就好了。
二、看看是否有下面两行代码
在这里插入图片描述
如果有注释掉,就好了。
对了记得配置完成之后记得重启

nginx -s reload
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值