发布到线上(vue,阿里云ECS,node,nginx,filezilla,pm2)

前端代码为什么要打包

因为前端的浏览器中只能识别出js html css 现在我们的代码包含的是.vue文件

这是浏览器无法识别的

还有在代码中充斥着大量的import 和export语法,这是模块化语法 import使用的是 es module规范 es6的模块化

在服务端中使用的是类似module.export 是commonjs语法

这些语法在浏览器是无法运行的

打包的目的是让代码再浏览器中运行

打包是要通过webpack进行打包

在这里插入图片描述

命令行输入npm run build:prod

打包完毕后 会生成一个dist目录

在这里插入图片描述

index.html就是入口文件,也是平常所说的单应用,因为他是单个页面的应用

他可以实现整个应用就只有一个页面index.html

里面所有的内容都是组件,通过js来进行动态的界面替换

这样打包完了以后 我们的项目就完成了,完成了以后尝试运行一下这个index.html

直接在浏览器打开

发现会报错

在这里插入图片描述

在这里插入图片描述

造成这个问题的原因是什么呢

在这里插入图片描述

因为这里写的是绝对路径

资源文件的路径设置怎么做呢

在这里插入图片描述

在重新打包一下

去index.html文件看一下

在这里插入图片描述

发现已经可以看到界面了

在这里插入图片描述

但是点击登录仍然登录不上去

没有关系 我们接着往下走


在这里插入图片描述

在这里插入图片描述

之后打开8089端口

发现是可以登进去的

目前nginx服务器现在是在本地,需要把它挪到线上


云服务器设密码

在这里插入图片描述

因为阿里云现在安全级别比较高

点击配置安全组规则

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

ssh采用的是22端口,所以应该是可以访问的

所以不是这个问题

应该重启一下

在这里插入图片描述

在这里插入图片描述

因为输入who没有出来东西

所以exit退出从新登了一下

在这里插入图片描述

这次可以了

这两句话可以实现免密登录(可忽略)

在这里插入图片描述

ssh-keygan生成rsa的秘钥

在这里插入图片描述

然后~/.ssh/id_rsa.pub找到文件

后面再加上远程连接的内容 [email protected]

更简便的是对host文件进行修改

在这里插入图片描述

在这里插入图片描述

这个意思是长时间不用的话连接会被服务器断开

在这里插入图片描述

解决办法:找到这个文件

在这里插入图片描述

在这里插入图片描述

这个代表每30秒客户端就会保持与服务端的连接 就可以避免自动断电的问题了

改完了他不会立即生效,需要重启一下

在这里插入图片描述

然后登出

在登录看看会不会自动断开


nodejs环境搭建

在这里插入图片描述

看看有没有生效

nvm并没有生成

在这里插入图片描述

在这里插入图片描述

vim .bash_profile

在这里插入图片描述

可以看到并没有生成nvm

在这里插入图片描述

应该是在bashrc下面

我这儿一直显示找不到nvm

后来又重新安了一遍 然后仔细看他的提示

在这里插入图片描述

这样跟着他输一遍就好了

然后输入nvm 显示出一大段东西的时候就代表安装好了

之后nvm install node

在通过node安装最新版本

在这里插入图片描述

这时候npm可以用了 npm -v

现在可以来安装cnpm了

在这里插入图片描述

cnpm的包就会安装到nvm下面

which cnpm

在这里插入图片描述


nginx安装

yum:是centos自带的 通过yum来安装centos的依赖

yum -y install pcre*

在这里插入图片描述

这些库都是要安装nginx的时候需要的依赖

再来安装openssl的依赖

yum -y install openssl*

之后来下载nginx

可以先建一个目录 叫nginx

mkdir nginx 待会就将源码放进去

在这里插入图片描述

找到nginx下载地址

我们选择源码编译形式来进行安装

在这里插入图片描述

在这里插入图片描述

因为nginx是用C语言来写的,所以要用make指令来对他进行编译 编译完了以后,使用make install来进行安装,

我们还得看看make这些指令存不存在,如果不存在还得通过yum来进行安装

用安装make 和gcc

也不知道这是安好了还是没安好

在这里插入图片描述

然后就可以来解压了

在这里插入图片描述

在这里插入图片描述

进入来看一下 这就是源码目录

在这里插入图片描述

有个绿色的configure 代表是个可执行文件

centos执行文件使用./的方式来执行的, 或者用sh 来执行

在这里插入图片描述

然后用make -j4来进行编译

在这里插入图片描述

编译完之后 make install来进行安装

安装完之后

在这里插入图片描述

可以看到nginx已经生成了

但是输入nginx 显示没找到,现在还没法直接使用

怎么办呢

进入到uer/bin目录下

cd /usr/bin

ll一下 usr/bin目录下的指令都是可以直接访问的

这里可以直接做个软连接

ln -s /usr/local/nginx/sbin/nginx nginx

可以理解为创建了一个快捷方式

在这里插入图片描述

可以看到他指向了哪

cd 回到root

这时候就可以调用nginx nginx就启动了

可以输入ps -ef|grep nginx看一下进程 进程启动了

在这里插入图片描述

可以通过nginx -s stop来停止nginx服务

来看一下nginx配置文件

在这里插入图片描述

进入conf

在这里插入图片描述

打开这个

在这里插入图片描述

可以看到默认启动的是80端口

在这里插入图片描述

路径是根路径下的html文件夹

在这里插入图片描述

打开看一下

在这里插入图片描述

现在通过nginx指令将服务启动起来

然后通过阿里云的ip来访问

但是我的并不能访问

试一下这个https://blog.csdn.net/qq_21882763/article/details/113823460 失败

https://www.cnblogs.com/songanwei/p/9239821.html

https://bbs.csdn.net/topics/396990545 这里有个评论 curl localhost失败

我知道了

需要添加一个80端口

在这里插入图片描述

这样就能访问了

在这里插入图片描述


接下来做一些个性化的定义

希望nginx能支持我们默认的配置

进入nginx目录下,创建一个nginx.conf

在这里插入图片描述

然后打开nginx的config文件

在这里插入图片描述

输入a进入编辑模式 把user改为root

在这里插入图片描述

然后到文件的最后添加一些内容

这是我们刚刚建的那个文件

在这里插入图片描述

意思是将root/nginx下面所有带有.conf的配置文件融合到当前的配置文件当中

接着打开刚刚建的nginx.conf

写入一些东西

在这里插入图片描述

因为我们监听的端口是80端口,和主配置文件有冲突,所以把主配置文件的端口改一下

给他改成9000

接着继续在nginx.conf写配置

在这里插入图片描述

接着进入upload 创建一个index.html

vim index.html

写点东西 这里写了个h1标签 里面写了hello world

检查一下配置文件

nginx -t

出错了

在这里插入图片描述

打开这个配置文件

发现并不能显示行号

那么如何显示行号呢 :set nu

是因为include那句话少了个分号,所以报错了

在这里插入图片描述

还是有错

额 又忘加分号了

重启nginx nginx -s reload

在这里插入图片描述

okkkk

现在就可以把我们的文件上传到上面了

如何实现呢

可以通过ftp工具 fileZilla / xftp 等很多软件

下载fileZilla 记得选client 而不是server

添加新站点

在这里插入图片描述

在这里插入图片描述

之后把我们最先打包好的文件拖到upload里面

在这里插入图片描述

在实际生产环境中建议大家不要开启index 重新修改nginx.conf配置文件

在这里插入图片描述

把这个关闭

不知道下面文件路径的话是没有办法访问到这边的文件的

yum install git 为了下载网易云接口

clone github项目

进入到项目

node app.js 但是退出了以后就

pm2 让它永远活着

写个脚本也可以

在这里插入图片描述


代码build好直接上传到服务器是可以的

但是如果我们新push了一些内容,还需要手动编译,编译完了以后打开ftp工具把代码上传上去手动上传上去

了解一下自动化部署

猜你喜欢

转载自blog.csdn.net/xiaozhazhazhazha/article/details/119046495