简单将vue项目部署到云服务器上

百度LS轻量服务器
PuTTy
- 远程登录
- 防火墙配置与开放端口
Ngnix安装配置
- 检查是否已经安装了nginx
- 安装nginx必要的依赖库
- - gcc
  - pcre
  - zlib
  - OpenSSL
- 安装Nginx
- 配置Nginx
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

成功~~万岁！！

小试牛刀：百度LS轻量服务器+Centos7.9+PuTTY+Nginx，部署Vue项目相关推荐

服务器使用Nginx部署Vue项目
服务器使用Nginx部署Vue项目首先得购买个服务器,在这就不教怎么购买了,本文章使用的是阿里云轻量级服务器CentOS7.6 一.安装Nginx 1. 使用XShell连接我们的服务器 2. 配置 ...
关于springboot vue前后端分离项目部署到阿里云轻量服务器（前后端分开部署）
0.购买阿里云服务器 1.安装jdk 使用yml安装 2.安装mysql 3.安装nginx 4.打包后端项目后端项目更改: 在pom.xml文件中,增加打包成jar包的配置文件 applicati ...
百度云轻量应用服务器LS从购买到web应用nginx搭建部署全流程--你值得拥有的入门级教程
一直想走一遍搭建全流程但总是拖延最近上海疫情居家办公每天没有通勤时间很充裕正好趁着这个时机学习一下部署整理一份笔记以防自己忘记也方便给有需要的人看.我会从购买服务器开始写一个很 ...
利用阿里云轻量服务器实现frp内网穿透（Mac远程控制win）
#一.准备我自己用的是一台m1的Mac,还有一台联想拯救者,为了在不同局域网下用Mac远程操作win的电脑. 1.首先你需要有一个阿里云的轻量服务器,学生优惠一年只需要96块钱,阿里云官网买. 服务 ...
腾讯云轻量服务器和云服务器区别
腾讯云轻量服务器和云服务器有什么区别?为什么轻量应用服务器价格便宜?是因为轻量服务器比云服务器CVM性能差吗?轻量应用服务器适合中小企业或个人开发者搭建企业官网.博客论坛.微信小程序或开发测试环境,云 ...
腾讯云轻量服务器和云服务器区别对比（超详细全方位）
腾讯云轻量服务器和云服务器有什么区别?为什么轻量应用服务器费用更低?是因为轻量服务器CPU内存性能比云服务器CVM性能差吗?轻量应用服务器适合中小企业或个人开发者搭建企业官网.博客论坛.微信小程序或开 ...
（阿里云笔记）贝勾置阿里云轻量应用服务器CentOS7.6镜像——Linux系统
目录 1.前言 2.注册阿里云账户 3.贝勾置买轻量应用服务器 4.云服务器ESC与轻量应用服务器区别 5.查看服务器 6.总结 1.前言本章主要介绍贝勾置阿里云轻量应用服务器以及如 ...
nodejs轻量服务器后端
nodejs轻量服务器后端搭建思路 server.js主函数 + mine.js配置文件 + index.html 测试网页目录结构 __./|__ test1|__ index.html|__ ...
轻量服务器怎么进信息库,轻量服务器怎么上传数据库
轻量服务器怎么上传数据库内容精选换一换计费项包括存储费和流量费,存储费根据存储库的不同进行收取.详细的计费项目如下所示:存储费:云硬盘备份存储库:备份云硬盘时购买.云服务器备份存储库:备份普通云 ...

小试牛刀：百度LS轻量服务器+Centos7.9+PuTTY+Nginx，部署Vue项目