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

我目前是一个前端开发人员,领取了这个服务器想着是用来搭建自己的网站,由于在这之前也没有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

安装命令:

apt-get install nginx

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

ps aux | grep nginx

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

2. 通过数据源安装nginx

该方法可以参考了以下博客:
阿里云服务器安装nginx(ubantu16.04)

3.自定义配置nginx

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

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

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

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

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目录拖到这个静态页面路径内。后面再慢慢研究服务端上传服务器。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐