nginx本地安装、Linux安装部署vue打包的dist静态html项目

459 阅读3分钟

1. Nginx(本地)

1.1 Nginx 安装

img

Nginx下载 download

下载解压之后的文件目录:

img

1.2 配置文件

路径:conf/nginx.conf

img

1.3 启动Nginx服务

双击nginx.exe图标即可启动

浏览器地址栏输入

http://localhost:80
//  输入回车访问,如图下图

img

1.4 关闭Nginx服务

window系统打开“任务管理器”,会有两个nginx.exe进程,从下往上依次选中,右键结束任务。

img

2. MySQL

2.1 下载安装

windows系统 download,选离线包

img

点击下载

img

下载好.msi后缀的文件,双击开始安装。

img

稍稍等待...

img

选中Server only,点击Next按钮。

img

自动跳到Installtion选项。点击Execure按钮。

img

等待...

img

Status Complete。点击Next按钮。

img

自动跳到Product Configuration。Status Ready to configure。点击Next按钮

img

自动跳到Type and Networking选显卡,默认端口3306。点击Next按钮。

img

自动跳到Authentication Method。选中 Use Legacy Authentication Method (Retain MySQL5.x Compatibility),点击Next按钮。

img

2.2 设置密码

自动跳到Accounts and Roles 输入两次密码,点击Next按钮。

img

自动跳到Windows Servive,定义Windows Service Name,默认MySQL80

img

自动跳到Apply Configuration,点击Execute按钮。

img

等待...

img

完毕,点击Finish按钮。

img

自动跳到Product Configuration。点击Next按钮。

img

自动跳到Installation Complete。点击Finish按钮。

img

2.3 检测是否安装成功。

Windows11 上搜索mysql,打开MySQL 8.0 Command Line Client应用。

img

输入前面设置的密码。回车

img

如图,成功。

img

3. Nodejs

3.1 node安装

自行百度安装方式,建议使用window-nvm方式,可以方便切换不同node版本。

img

4. MobaXterm

4.1 下载安装

下载download

解压,我这下载的是MobaXterm_installer_22.1.msi

img

双击.msi文件

点击Next按钮。

img

勾上 I accept the terms in the License Agreement

点击Next按钮

img

选择自定义安装目录,点击OK按钮。

img

继续Next按钮

img

Install按钮

img

等待...

img

点击Finish

img

双击桌面图标

img

等待...

img

成功打开

img

右键也能打开

img

4.2 登录服务器

1、 Session

img

2、SSH

img

3、输入服务器ip地址

img

4、输入root

img

5、输入服务器密码

6、选择自动或者不自动保存密码,这里我就No了。

img

5. Nginx (Linux服务器)

5.1 下载Nginx

//指令 根路径执行
yum install nginx

img

5.2 安装完毕

此时进入/usr/share/nginx/,会看到已经生成了html跟modules,接着进入html

img

5.3 vue打包项目

npm run build
// 接着压缩dist包

5.4 上传dist.zip到服务器

先在html中创建mosiduo文件夹,接着进入mosiduo内

img

上传dist.zip

img

上传中,等待传完。

img

5.5 解压

// 指令行输入,回车
//先进入modisuo文件夹
cd /usr/share/nginx/html/mosiduo/
//解压到当前目录
unzip dist.zip

img

5.6 nginx配置

进入/etc/nginx/

img

双击打开nginx.conf

//默认
root         /usr/share/nginx/html;

5.7 启动nginx服务

// 指令行输入,回车
cd /usr/sbin
./nginx

img

接着查看ngxin运行状态

// 指令行输入,回车
ps -ef | grep nginx

img

>注释

前3行分别是nginx主进程(master process)和工作进程(worker process),

最后一行是grep nginx命令。当看到这两个nginx进程时,则代表nginx已经成功启动。

从第1列可以看出,nginx主进程以root用户运行;而工作进程以nginx用户运行,第2列显示了4个进程的ID(即PID:14599,14600,14601,14809)。

5.8 浏览器访问

// 服务器ip地址(我这里不暴露了就用111.222.333代替)拼上html里的文件夹路径
http://111.222.333/mosiduo/dist/#/

img

访问成功!。

5.9 停止nginx服务

// 指令行输入,回车
nginx -s quit // 正常停止或关闭
nginx -s stop // 快速停止或关闭

浏览器立马访问失败

img

5.10 重启服务

// 指令行输入,回车
service nginx restart // 重启服务

5.11 修改配置

/etc/nginx/下

修改nginx.conf文件的root配置

root         /usr/share/nginx/html/mosiduo/dist;
// 指令行执行,回车
nginx -s reload

5.12 重新浏览器访问web

// 路径修改为
http://111.222.333/#/
// 不需要再拼上文件名路径

img

又可以重新访问了!

5.13 查找文件

// 输入指令 回车
find / -name nginx

img

5.14 删除nginx相关

先查找出nginx相关文件,再逐个删除,举例子删除上一步的第一个

// 执行
rm -rf /etc/logrotate.d/nginx
// 如图

img

最后再用yum来清除

// 执行
yum remove nginx

img

删除完毕。