由于阿里云的活动，我领取了一款云服务器可以免费使用一个月。如下图
在这里插入图片描述

我目前是一个前端开发人员，领取了这个服务器想着是用来搭建自己的网站，由于在这之前也没有 linux 的相关学习经历，在领取该服务器后进行了一系列的操作后才将静态网页上传到服务器并通过公网 ip 访问可以显示出来。便在此处记录下整个过程。

一、领取服务器

  1. 在领取服务器后首先选择的是服务器的操作系统，这里我选择的是Ubuntu操作系统，版本是14.04 64位。
  2. 完成以上选择后，直接点击购买就可以了。购买完成后打开控制台，在左侧菜单栏里打开实例与镜像 ——> 实例，然后将服务器的密码进行重置
    在这里插入图片描述
  3. 重置完成后，进行远程连接。在这里我选择的是第一个 Workbench 远程连接。然后在密码栏输入刚刚重置的密码，进行登录。登录成功后就进入了命令窗口。在命令窗口输入相关命令就可以对服务器进行一系列操作。
    在这里插入图片描述

二、安装配置 nginx

nginx 是一个高性能的 HTTP 和反向代理 web 服务器。我这里通过 nginx 来配置静态页面，同时也是为了以后方便上传 vue 项目。

1. 通过包管理器安装 nginx：

Ubuntu 和 CentOS 分别对应于不同的包管理器。
这里使用 Ubuntu 系统，所以选择apt-get命令进行安装

操作系统 文件格式 工具
Ubuntu .deb apt，apt-get，apt-cache，dpkg
CentOS .rmp yum

安装命令：

1
apt-get install nginx

安装成功后可以通过以下命令查看 nginx 进程

1
ps aux | grep nginx

通过包管理器安装 nginx 成功后会默认开启 nginx 服务，直接访问当前服务器公网 ip 即可看到如下页面
在这里插入图片描述

2. 通过数据源安装 nginx

该方法可以参考了以下博客：
阿里云服务器安装 nginx（ubantu16.04）

3.自定义配置 nginx

在安装完 nginx 后，按照上述步骤，打开公网 IP 就可以看到 nginx 的欢迎页。到这算是成功了一大半。最后可以修改 nginx 中的配置文件，渲染自己的网页。可以参照以下博客：
云服务器 Nginx 配置

三、使用图形化工具管理服务器的文件

这里我使用的是 WinSCP，安装就不介绍了，安装完成后打开，协议默认，端口默认，用户名一般都是 root，密码就是之前重置的实例密码。
在这里插入图片描述
登录成功后显示如下页面，左边显示的当前你的电脑的硬盘内的文件，右边显示的是服务器的文件。可以直接将左边的文件拖入到右边服务器内。
在这里插入图片描述

这里贴上我的配置文件和目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
server {
	listen 80 default_server;
	listen [::]:80 default_server ipv6only=on;




	# Make site accessible from http://localhost/
	server_name localhost;

	#location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		# try_files $uri $uri/ =404;
		# Uncomment to enable naxsi on this location
		# include /etc/nginx/naxsi.rules
	#}

 	 location / {
 	 		# 静态页面存放在这个路径
          	root /home/qd/html;
            index index.html index.htm;
            try_files $uri $uri/  /index.html;
     }
	# Only for nginx-naxsi used with nginx-naxsi-ui : process denied requests
	#location /RequestDenied {
	#	proxy_pass http://127.0.0.1:8080;
	#}

	#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 /usr/share/nginx/html;
	#}

	# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
	#
	#location ~ \.php$ {
	#	fastcgi_split_path_info ^(.+\.php)(/.+)$;
	#	# NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
	#
	#	# With php5-cgi alone:
	#	fastcgi_pass 127.0.0.1:9000;
	#	# With php5-fpm:
	#	fastcgi_pass unix:/var/run/php5-fpm.sock;
	#	fastcgi_index index.php;
	#	include fastcgi_params;
	#}

	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	#location ~ /\.ht {
	#	deny all;
	#}
}

在这里插入图片描述
至此就可以正常的显示你上传的静态页面了。同理，vue 项目只需要将打包后的 dist 目录拖到这个静态页面路径内。后面再慢慢研究服务端上传服务器。