nginx 部署前端项目,Linux基本操作,FTP上传,npm升级nodejs

登录服务器

js 复制代码
$ ssh root@你的ip
# 然后输入密码,完成登录

Linux 基本知识

文件操作

指令 备注
vim <文件名> 编辑某个文件
cat <文件名> 查看某个文件的内容
touch <文件名> 新建某个文件

vim编辑器

通过 vim <文件名> 即可进入对该文件的编辑模式,按下 i 切换到编辑状态。

想要结束输入,可以按 esc 键,想要退出编辑模式,可以敲下 :wq 或者按快捷键:shift+zz

在命令模式下按下 i 就进入了输入模式。

在输入模式中,可以使用以下按键取消与显示行号:

功能 命令
行号显示 :set nu
行号显示取消 :set nonu

杀死进程

查看进程:

$ ps -ef

查看到进程中的 PID ,然后执行:

正常杀死

$ kill -1 2235

强制杀死

$ kill -9 2235

SSH 上传/下载文件(本机的终端运行)

SSH 可以通过 scp 命令来上传文件,是 Linux 系统下基于 SSH 登陆进行安全的远程文件拷贝命令,scp 是 secure copy 的简写,可以使用它上传本地文件夹到远程服务器,也可以从远程服务器上下载文件夹到本地:

  • 打开你的某个项目 如用git 打开你所打包的前端目录 dist

  • 上传文件夹到远程服务器

scp -P port -r /local/dir username@servername:/remote/dir

scp -r ./dist root@你的ip:/home

从远程服务器下载文件夹

scp -P port -r username@servername:/remote/dir/ /local/dir

scp -r root@你的ip:/home ./

-r 参数表示递归复制,即复制该目录下面的文件和目录,如果要上传单个文件,只要把 -r 删除。大写的 P 表示的是端口,如果还是默认的 SSH 端口 22 没有更改,则不需要 -P

注意:这两行代码要在你本机的终端运行,而不是在阿里云的终端。

FTP上传

你也可以使用ftp工具上传,如 File Zilla。点击即可下载。

nginx

快速安装Nginx

首先,确保自己连接上了服务器 ssh 用户名@公网ip,然后运行:

yum list | grep nginx

接着运行:

yum install nginx

安装好后 nginx -v 可以查看 Nginx 版本信息。并且使用 rpm -ql nginx 可以查看 Nginx 被安装到了什么地方。

这里有两个文件夹要留意: /etc/nginx/conf.d/ 文件夹,是我们进行子配置的配置项存放处,/etc/nginx/nginx.conf 主配置文件会默认把这个文件夹中所有子配置项都引入; /usr/share/nginx/html/ 文件夹,通常静态文件都放在这个文件夹,也可以根据你自己的习惯放其他地方;

然后设置 Nginx 的开机启动:

systemctl enable nginx

启动 Nginx :

systemctl start nginx

浏览器访问公网IP

在浏览器输入你的公网IP,无需端口号(默认80),如果看到 Welcome to nginx 之类的界面,就是Nginx安装并启动成功了。

配置node环境

  • 安装node

yum install nodejs -y

  • nodejs升级到最新LTS版本

npm升级nodejs

安装 n 模块 npm install -g n

安装最新的稳定版本 n stable

这时候我们可以通过node -vnpm -v来查看版本

Nginx重启

  • 需进入到 /etc/nginx/sbin 目录下面执行下面的代码

nginx -s reload # 向主进程发送信号,重新加载配置文件,热重启

Nginx配置文件

我们一般对Nginx的修改主要就是修改 /etc/nginx/nginx.conf 这个配置文件,nginx.conf 结构图:

通常我会找到server,然后做如下设置:

server {

listen 80;

server_name localhost;

location / {

root /usr/local/html;

index index.html index.htm;

}

}

这里要确保你在 /usr/local 这个目录下创建了一个 html 文件夹,并且有index.html文件。

root /usr/local/html(项目的目录);
index index.html index.htm(项目目录下面的index.html文件);

我们之前把打包好的前端项目上传到服务器 /home/dist 目录中了 只需这样修改就行了

root /home/dist;
index index.html index.htm;

重启nginx服务器

  • 需进入到 /etc/nginx/sbin 目录下面执行下面的代码

nginx -s reload # 向主进程发送信号,重新加载配置文件,热重启

再次访问ip

  • 可见部署成功
相关推荐
蜗牛快跑2139 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy10 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js