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

  • 可见部署成功
相关推荐
Simon_He7 分钟前
一个渲染内核,五个框架包:我的流式 Markdown 渲染库是怎么长成“全家桶”的
前端·vue.js·markdown
小满zs26 分钟前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app
林深见鹿_海蓝见鲸33 分钟前
微信小程序反编译完整教程(Windows 新手版)
前端
默_笙1 小时前
😋 我让爬虫终于看到了我的网站,后端同事说"这也行?"(上):SEO 与渲染模式
前端·javascript
feixing_fx1 小时前
告别枯燥字体:Web 字体加载策略与 font-display 最佳实践
前端·css·前端框架·交互·css3
Liora_Yvonne2 小时前
不懂后端,只会 TypeScript,想独立做完整项目?这套全栈底座就是给前端准备的
前端·后端·全栈
前端Hardy2 小时前
GitHub 爆火!236K+ Star!一套 Skills 让 AI 按工程师方式写代码
前端·后端
烬羽2 小时前
AI Coding 全流程实战:从需求到上线,我用 AI 开发了一个 NPM 包
前端·react.js·ai编程
前进的程序员2 小时前
Codex破局:前端组件秒级生成|提速React/Vue开发,可复用提示词+实战调试经验
前端·vue.js·react.js·codex
前端snow2 小时前
ai agent ---output汇总
前端