小试牛刀:百度LS轻量服务器+Centos7.9+PuTTY+Nginx,部署Vue项目
百度云服务器LS,Linux系统,centos7.9,部署vue项目到云服务器上
简单将vue项目部署到云服务器上
百度LS轻量服务器
百度轻量服务器.是一种内置应用型镜像或系统型镜像的小规格云服务器, 绑定适配大小的磁盘和带宽,为中小型企业和个人用户提供官网搭建、web应用搭建、云上学习和测试等场景的服务。正好赶上百度云搞新客优惠活动,别的不说先乘着便宜弄一个练练手。
这里可以任意选择所要安装的应用或系统镜像,后面还可以随意更改,不必担心之后改不了了。
购买之后后续的配置可以参考百度云的入门指南,本文主要用的是安装了Linux系统镜像:Centos7.9的服务器。
PuTTy
远程登录
有了带有Linux系统的云服务器之后,可以选择用百度云的VNC远程连接服务器
这里为了后续传输打包文件方便,介绍使用putty。
PuTTY是一个Telnet、SSH、rlogin、纯TCP以及串行接口连接软件
官方下载地址:putty
安装完成后,打开putty,连接服务器
跟VNC登录一样输入用户名和密码
登录成功!!
防火墙配置与开放端口
第一次登录服务器后,最好先检查下防火墙的状态
# 一些常用的防火墙命令
## 查看防火墙状态
firewall-cmd --state
systemctl firewalld status #active(running),即开启状态
## 开启/关闭防火墙
systemctl enable firewalld.service #开机启用
systemctl disable firewalld.service # 开机禁用
systemctl start firewalld.service #开启
systemctl stop firewalld.service #关闭
systemctl restart firewalld.service #重启
开启防火墙之后,设置对外开放的端口号
# 开放端口
firewall-cmd --zone=pubilc --add-port=9527/tcp --permanent #开放9527端口
# 关闭端口
firewall-cmd --zone=public --remove-port=9527/tcp --permanent #关闭9527端口
# 重载配置生效
firewall-cmd --reload
# 查看防火墙所有开放端口
firewall-cmd --zone=public --list-ports
firewall-cmd --list-all
Ngnix安装配置
登录成功后,在centos中安装nginx
检查是否已经安装了nginx
sudo find -name nginx
安装nginx必要的依赖库
gcc
GCC(GNU Compiler Collection,GNU编译器套件)),可以编译 C,C++,Ada,Object C和Java等语言
##检查是否已安装
gcc -v
##安装
yum -y install gcc
pcre
pcre是一个perl库,作用主要是用来提供正则表达式的相关功能;
pcre和pcre devel是包含与被包含的关系,devel包含pcre
##安装
yum install -y pcre pcre-devel
zlib
zlib是一个免费的、通用的、不受法律约束的——即不受任何专利保护的无损数据压缩库,提供压缩和解压缩方式
##安装
yum -y install zlib zlib-devel
OpenSSL
OpenSSL是一个开放源代码的软件库包,应用程序可以使用这个包来进行安全通信,避免窃听,同时确认另一端连接者的身份。
##安装
yum -y install openssl openssl-devel
安装Nginx
这里采用的是下载nginx压缩包安装的方式,想要下载的版本可以到nginx官网上找:https://nginx.org/en/download.html
## 下载nginx包
wget https://nginx.org/download/nginx-1.20.2.tar.gz
## 解压缩
tar -zxvf nginx-1.20.2.tar.gz
## 编译安装
./configure && make && make install
配置Nginx
nginx安装完成后,需要对nginx进行配置,主要是对nginx.conf文件进行修改
## 打开nginx.conf(配置文件的目录路径因nginx安装的路径而异)
vim /usr/local/nginx/conf/nginx.conf
简单修改下配置,主要是修改端口号,改成服务器防火墙对外开放的端口号
按下i 键进入编辑模式
修改完成后,按下ESC键,键盘输入“:wq”,Enter回车–保存并退出
然后重新加载nginx.conf配置文件
cd /usr/local/nginx/sbin
./nginx -s reload
还是在/usr/local/nginx/sbin下,启动nginx,并查看nginx状态
## 启动nginx
./nginx
## 查看nginx状态
ps -ef | grep nginx
启动成功!!
这时可以在浏览器中输入云服务器的公网IP+端口号,页面上显示Nginx首页说明成功
VUE项目部署
打包vue文件
呃(⊙o⊙)…,这个就不用多说了吧,哈哈。如果用的是webpack,运行build命令即可打包生成dist文件夹
传输文件到服务器上
打包之后的dist文件夹,需要传到nginx服务器里,这里我使用的是putty配套的psftp工具
PSFTP是PuTTY SFTP客户端,用于本地与服务器间安全传输文件(使用SSH连接)
打开psftp,登录服务器
顺便列一下psftp的常用命令
#登录连接服务器
open 服务器地址
#关闭psftp
quit/exit
#切断连接但不关闭psftp
close
# 本地文件
lcd d:/demo #打开路径
lpwd #显示当前路径
# 服务器文件
cd /usr #打开路径
pwd #显示当前路径
# 上传下载
get/put something.txt #下载/上传单个文件
get/put something.txt another.txt #下载/上传单个文件并重命名为another.txt
get/put -r 文件夹名 #递归符号-r,下载上传文件夹,可以直接输入文件或文件夹的绝对路径下载上传
接下来,就把dist文件夹传输到服务器的/usr/local/nginx/html这个文件夹(即nginx安装目录下的html文件夹)
接着把nginx.conf中虚拟主机的根目录改一下
重新加载nginx.conf配置文件
cd /usr/local/nginx/sbin
./nginx -s reload
成功~~万岁!!
更多推荐
所有评论(0)