记录第一次部署自己的网页到云服务器上。虽然还没完成，并且实际的样子和理想的样子也还有很大差距，但是收获还是很多，中间遇到了很多问题也花了很多时间才解决。

一、用到的知识

1.vue

页面是使用vue全家桶搭建的，这里不讨论其中的只是以及前端三件套。主要说说项目部署云服务器的过程。

二、搭建过程

1.购买云服务器

买的阿里云的最便宜的那个，仅用来学习。35元/年，还是挺便宜的，本打算买个域名把域名解析到IP上，虽然也挺便宜想想还是算了，感觉没有太大的必要。

• (1) 选择的是Linux操作系统

听朋友说Linux操作更简单于是选择了这个(最然大一下学过Linux，但是那时什么也不懂就没听课，不过大概知道了是个啥)。

Linux暂时了解一些常用命令就可以了，是在不行可以查文档看博客。

2.配置服务器

• 设置安全组

打开需要用到的一些端口。如80端口等(默认打开了一些端口)

• 重置密码

设置完密码服务器差不多就配置完了，接下来是上传打包好的dist文件(写的网页代码)。

3.连接服务器

连接服务器有几种方法。

• 阿里云官网提供的远程连接

连接后就可以不用借助其他工具操作云服务器的系统了，如下：

但是我没怎么使用这种方法连接服务器，因为不能上传本地文件到服务器中，我是用的是Xshell 7和Xftp 7连接远程服务器和上传本地文件。

• Xshell 7和Xftp 7连接服务器

安装可以参考这里下载安装。

4.上传文件

具体上传步骤这里不说明，dist文件我是上传到home目录下（最开始上传到root文件下，但是一些列部署完成后无法访问，折腾了很久，花了好长时间，后来看到一篇文字收拾nginx无法访问root目录，所以上传到了home目录下）

注：这里存放位置不规范，本该是在home下创建文件夹，再在其中创建www文件夹，然后在www文件中放dist文件。这里我先暂时如图这样放。

5.安装nginx

nginx是啥这里不说明，只用知道需要这个代理服务器，让访问者访问到你想让他们看到的index.html网页文件。

安装nginx我也搞了很久，现在已经不能直接通过yum install nginx命令来安装了：原因与怎么解决可以参考这里centos8

简单来说就是要一次执行这几条命令：

1.rename '.repo' '.repo.bak' /etc/yum.repos.d/*.repo

2.wget https://mirrors.aliyun.com/repo/Centos-vault-8.5.2111.repo -O /etc/yum.repos.d/Centos-vault-8.5.2111.repo

3.sed -i 's/mirrors.cloud.aliyuncs.com/url_tmp/g' /etc/yum.repos.d/Centos-vault-8.5.2111.repo && sed -i 's/mirrors.aliyun.com/mirrors.cloud.aliyuncs.com/g' /etc/yum.repos.d/Centos-vault-8.5.2111.repo && sed -i 's/url_tmp/mirrors.aliyun.com/g' /etc/yum.repos.d/Centos-vault-8.5.2111.repo

4.yum clean all && yum makecache

最后才可以通过yum install nginx安装nginx

5.yum install nginx

注：nginx安装到etc目录中

6.配置nginx

这里我也遇到很多坑，搞了很久。。

• 首先进入nginx文件夹下

• 通过vim编辑nginx.conf文件 vim nginx.conf

怎么使用vim编辑文件这里不说明(学习过linux会知道)。

• 找到nginx.conf中的这个位置(这里最开始是空的)，修改一下内容：

注：****root这里的目录就是之前的dist文件的路径，通过这个配置，用户通过公网的IP地址就可以访问到你的index.html了(你写好网页)；

7.启动nginx

通过命令 service nginx start启动。

这里注意dist不要放到root中，我当时就是然后访问一直报错500，放到home中后就可以访问了。

三、遇到的一些问题

1.网页的背景图片加载不出来

问题

• 写好的网页本该是这个样子

• 然后实际访问确实这个样子：

解决

这个问题困扰了很久，查不到问题的解决方法，最后通过审查页面元素终于发现了问题，原来是路径中出现了中文，中文改成英文就可以了。

2.访问加载速度慢

访问的时候要的好几秒才能加载出来，主要原因是背景用到高清图片，文件比较大所以慢，但是为了美观，暂时还是使用这个大图。

• 后面有对代码进行了优化，vue路由使用懒加载，不再使用全部加载。

四、总结

以上就是部署服务器的大概过程，网站内容还没完成，计划暑假前完成，网站的资源用到静态资源，还没有使用后端，后端打算使用node.js，等页面布局完成就开始写后端代码。