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

准备工作

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

登录阿里云

点击控制台

云服务器部署GPT 云服务器部署前端项目_html


点击左侧【云服务器ECS】—>[实例]

云服务器部署GPT 云服务器部署前端项目_nginx_02


注意下图-标记的地方

云服务器部署GPT 云服务器部署前端项目_配置文件_03


是你登录阿里云的域名

使用Xshell

打开软件新建会话(点击左侧的绿色的加号)

云服务器部署GPT 云服务器部署前端项目_配置文件_04


主机就是刚开始划线的地方。

然后登录需要输入用户名和密码

如果忘了见下图(反正我是忘了一次)

云服务器部署GPT 云服务器部署前端项目_配置文件_05


实例里面有个更多;里面有修改的地方。

登录成功之后,你可以看到

云服务器部署GPT 云服务器部署前端项目_nginx_06


然后就可以开启你的配置工作了。

这里可以使用Xftp来看远程服务器的文件,当然也可以修改。点击下图标注的地方就好了。

云服务器部署GPT 云服务器部署前端项目_云服务器部署GPT_07

安装工具

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

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

安装web应用服务器

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

apt install nginx

如果安装不成功,下面的错误

云服务器部署GPT 云服务器部署前端项目_nginx_08


更新一下apt

apt-get update

然后再一次安装nginx;

nginx -v

云服务器部署GPT 云服务器部署前端项目_云服务器部署GPT_09


证明安装成功

启动
nginx -s reload

这是在浏览器输入阿里云的ip地址,显示如下页面

云服务器部署GPT 云服务器部署前端项目_html_10


证明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安装的位置和配置文件位置

云服务器部署GPT 云服务器部署前端项目_配置文件_11


找到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这个配置文件,所以一直显示上图那个页面。删除这个文件就好了。

二、看看是否有下面两行代码

云服务器部署GPT 云服务器部署前端项目_云服务器部署GPT_12


如果有注释掉,就好了。

对了记得配置完成之后记得重启

nginx -s reload