项目上线流程

r囧r小猫 2023-10-06 16:35 71阅读 0赞

### 1.代码打包 ###

当我们完成一个项目开发的时候，下一步肯定会要把这个项目放到互联网上进行发布，此时我们就得先通过打包命令`npm run build`来对项目进行打包。

在命令行工具中运行（需进入项目路径）：

npm run build

稍等片刻后如果提示如下信息则表示打包成功：

![949d6ac19159f53bd9b82eec64b655d9.png][]

打包成功后会在当前项目目录下多出一个`dist`目录：

![e6c56acc3f4bebbed4f16852e6d961a0.png][]

在打包之前一定要将之前开发过程中使用反向代理的操作给去除掉，一上线代理就失效了。同时需要注意解决数据接口的跨域请求问题。

> 注意：打包之后得到的这些文件都是经过压缩处理的，如果需要更改原先JavaScript、css等文件的内容，请在开发环境中去修改，然后重新打包生成。

### 2.上线部署 ###

项目上线部署需要有服务器，此处我们以已经购买好的阿里云ECS（CentOS 7.9版本操作系统）为例。

> 后续操作会用到不少相对路径，为了保证大家的操作正确， **此处统一先切换当前工作路径：**

cd /usr/local/src
    # 该地址是已经存在的，不需要自己创建

①如果项目中使用到了mongoDB，则需要先安装`mongoDB`

下载地址：[https://www.mongodb.com/try/download/community][https_www.mongodb.com_try_download_community]

![2e949b5ad84c3687bbd172f7750ce708.png][]

可以选择`Copy Link`随后去服务器中对应的目录执行命令下载：

wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz
    # 或
    curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.4.1.tgz

**也可以**直接用今日`docs`目录下已经下载好的压缩包，使用FileZilla进行上传到服务器的`/usr/local/src`目录。

![c63d9bcf24020779958f34014ec4b145.png][]

`.tgz`格式文件是压缩包文件格式的一种，需要使用其中的内容得先解压，解压命令为：

tar -zxvf mongodb-linux-x86_64-rhel70-4.4.1.tgz
    # 或
    tar -xvf mongodb-linux-x86_64-rhel70-4.4.1.tgz
    
    # -z：表示指定解压缩所使用的方式，表示使用gz格式进行解压
    # 如果不指定使用什么方式解压，则tar会自己判断

解压后会得到mongoDB的解压目录：

![656df610538afb8ef0bed750331a6592.png][]

Linux系统下对于第三方软件的安装一般存放在`/usr/local`下，此处建议将解压后得到的目录中的`bin`目录进行转移，转移的同时需要创建mongoDB的数据文件夹和日志文件夹，命令如下：

mkdir -p /usr/local/mongodb/data
    mkdir /usr/local/mongodb/log
    cp -r /usr/local/src/mongodb-linux-x86_64-rhel70-4.4.1/bin /usr/local/mongodb/
    # 建立mongodb需要使用的日志文件
    touch /usr/local/mongodb/log/logfile

上述指令执行完毕后可以通过`ls`进行列出检查，查看是否有以下文档结构：

ls /usr/local/mongodb/

![b055b4a5ab74b052bd5391ef5b911db0.png][]

随后，就可以通过以下命令去启动mongoDB了：

> 需要注意，此种方式的mongoDB为绿色软件，默认不会开机自动启动，不再需要使用的时候直接删除 `/usr/local/mongodb`目录即可卸载软件。

/usr/local/mongodb/bin/mongod --dbpath=/usr/local/mongodb/data --logpath=/usr/local/mongodb/log/logfile --bind_ip=127.0.0.1 --fork
    # --dbpath：指定数据库文件夹位置
    # --logpath：指定日志文件位置
    # --bind_ip：绑定监听的网卡ip地址
    # --fork：以后台服务的形式运行

> 注意： `logpath`配置项的值一定是一个文件（可以不存在），不能是文件夹。

![88ea0fe3f8fd2a0c1364594034a1fd4e.png][]

至此，mongoDB已经可以使用了，可以通过运行mongoDB连接工具进行测试，如果有以下输出则一切正常：

![f77a33b0d8741e13f7193ece178ec623.png][]

此时可以在其中创建好`maizuo`数据库，以及往库中写入`users`表中的数据了。

![8ce150175c50e95a4afe4cacc8dae3b3.png][]

②安装`nodejs`

文档地址：https://github.com/nodesource/distributions/blob/master/README.md

![35485a553fc8ca18759df9735d634d6e.png][]

复制好对应的指令后在终端中去执行（这个命令会在我们服务器上安装一个nodejs的镜像源以告诉包管理工具去哪里下载nodejs）：

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

随后运行以下命令安装nodejs：

sudo yum install -y nodejs

> 使用 `sudo`开头的命令 **可能**会提示让输入密码，如果有则输入当前用户的密码即可。

![9b69fbc31aea9724056579a7aaa8020e.png][]

安装好nodejs后，可以通过命令测试是否安装成功nodejs：

node -v

![abc72ffc12ec807ab475b515aeea4f09.png][]

最后，可以继续安装一些可选的全局包以方便后面使用：

# 安装nrm，并切换npm镜像源为淘宝
    npm i -g nrm
    nrm use taobao
    
    # 安装nodemon
    npm i -g nodemon
    
    # 安装pm2（让node在后端运行的工具，这样可以在配置完毕之后关闭终端窗口）
    npm i -g pm2

到此，nodejs环境安装完毕！

③安装`nginx`

> Nginx是一款 **轻量级**服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

软件官网：https://nginx.org/

傻瓜式包管理工具安装方式说明参考地址：https://nginx.org/en/linux\_packages.html\#RHEL-CentOS

![c064e42a4f797b053fa7304d69190dbd.png][]

按照上述提示，在服务器上指定的位置`/etc/yum.repos.d/nginx.repo`新建一个文件，文件内容如下：

[nginx-stable]
    name=nginx stable repo
    baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
    gpgcheck=1
    enabled=1
    gpgkey=https://nginx.org/keys/nginx_signing.key
    module_hotfixes=true
    
    [nginx-mainline]
    name=nginx mainline repo
    baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
    gpgcheck=1
    enabled=0
    gpgkey=https://nginx.org/keys/nginx_signing.key
    module_hotfixes=true

> 对于文件的创建和修改，可以考虑咋windows上进行，写完毕之后再通过文件传输工具，将文件上传到指定的位置即可。

![1862de4c87780b93f800756cb7459127.png][]

随后运行nginx的安装命令：

sudo yum install -y nginx

![1f9bbf1d6e75d03f157a7988a99f4316.png][]

在nginx完成安装后，可以通过以下几个命令来管理nginx服务：

# 启动nginx
    systemctl start nginx
    
    # 停止nginx
    systemctl stop nginx
    
    # 重启nginx
    systemctl restart nginx
    
    # 设置nginx开机自启动
    systemctl enable nginx
    
    # 设置nginx开机不自启动
    systemctl disable nginx

接下来启动nginx：

systemctl start nginx

> 请注意，后续每次修改了nginx的配置文件都需要对nginx服务进行重启，否则新的配置不会生效。  
> nginx相关的目录位置：

*  配置文件
 *  **主配置文件nginx.conf：**/etc/nginx/nginx.conf
 *  **从配置文件‘\*.conf’**：可以是任意位置，以主配置文件声明为准，比较常用针对站点的从配置文件在`/etc/nginx/conf.d/`目录下
 *  默认站点目录
 *  /usr/share/nginx/html（等于PHPstudy中的WWW目录，回头代码得放到这个里面去）

④域名解析（**如果有域名的话**）

> 如果是大陆服务器使用，则域名一定要通过了ICP备案才可以

以阿里云为例，先进入域名控制台  
，在需要使用的域名后面点击`解析`按钮进入解析页面，随后点击`添加记录`按钮并按照自身需求填写解析信息：

![8d4b4fe25fae04626b924ed866192c35.png][]

设置完成后一般1分钟内即可生效，可以在本机`windows`上通过`ping`命令进行测试：

# 以刚才设置的域名为例（请替换成自己的域名）
    ping sh2008.lynnn.cn

![d19bfcbcce27e2d2687d0b3296548633.png][]

⑤项目代码部署

a. 将打包好的vue代码上传到Nginx默认的站点下，目录地址为`/usr/share/nginx/html`

![ded80b790d8a2442156b34cde6d7d083.png][]

b. 启动node服务端为项目提供数据访问服务

> 如果出现无法访问的情况，请注意防火墙与云安全组的设置。

上传node服务端的代码到远程服务器，位置可以随意（因为代码是node运行的，不是nginx）：

![b26c5999169284e7bc9274c432f45e7f.png][]

接下来进入node代码的目录`/usr/local/src/http`，运行安装所需模块的指令：

npm install

此时即便运行了node服务器，也会出现无法访问的情况，需进入阿里云的控制台添加允许3000端口通过。

![d0bd965f5ce0ef3c837feb93a75d7808.png][]

最后，让node在后台执行http.js文件（根据需要换成自己的文件名），此处需要用到前面安装的pm2工具：

# 先进入项目目录
    pm2 start http.js
    
    ## 重启
    pm2 restart http.js
    ## 停止
    pm2 stop http.js

如果成功，则会看到如下效果：

![67e05276914f0ff1ee8790d7f545538f.png][]

c. 解决nginx下，路由模式`history`失效的问题

方案1：不使用`history`模式的路由

> 不使用 `istory`模式，则得用hash模式，该模式下地址栏会有 `#`

方案2：配置nginx，让nginx支持`history`模式的路由

try_files $uri $uri/ /index.html;

将上述的代码放到`/etc/nginx/conf.d/default.conf`中

location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # 以下是新增的一行
        try_files $uri $uri/ /index.html;
    }

随后重启nginx：

systemctl restart nginx

重启之后新的配置将会生效，项目到这里也就可以通过域名或者ip地址进行访问了。

[949d6ac19159f53bd9b82eec64b655d9.png]: https://img-blog.csdnimg.cn/img_convert/949d6ac19159f53bd9b82eec64b655d9.png
[e6c56acc3f4bebbed4f16852e6d961a0.png]: https://img-blog.csdnimg.cn/img_convert/e6c56acc3f4bebbed4f16852e6d961a0.png
[https_www.mongodb.com_try_download_community]: https://link.zhihu.com/?target=https%3A//www.mongodb.com/try/download/community
[2e949b5ad84c3687bbd172f7750ce708.png]: https://img-blog.csdnimg.cn/img_convert/2e949b5ad84c3687bbd172f7750ce708.png
[c63d9bcf24020779958f34014ec4b145.png]: https://img-blog.csdnimg.cn/img_convert/c63d9bcf24020779958f34014ec4b145.png
[656df610538afb8ef0bed750331a6592.png]: https://img-blog.csdnimg.cn/img_convert/656df610538afb8ef0bed750331a6592.png
[b055b4a5ab74b052bd5391ef5b911db0.png]: https://img-blog.csdnimg.cn/img_convert/b055b4a5ab74b052bd5391ef5b911db0.png
[88ea0fe3f8fd2a0c1364594034a1fd4e.png]: https://img-blog.csdnimg.cn/img_convert/88ea0fe3f8fd2a0c1364594034a1fd4e.png
[f77a33b0d8741e13f7193ece178ec623.png]: https://img-blog.csdnimg.cn/img_convert/f77a33b0d8741e13f7193ece178ec623.png
[8ce150175c50e95a4afe4cacc8dae3b3.png]: https://img-blog.csdnimg.cn/img_convert/8ce150175c50e95a4afe4cacc8dae3b3.png
[35485a553fc8ca18759df9735d634d6e.png]: https://img-blog.csdnimg.cn/img_convert/35485a553fc8ca18759df9735d634d6e.png
[9b69fbc31aea9724056579a7aaa8020e.png]: https://img-blog.csdnimg.cn/img_convert/9b69fbc31aea9724056579a7aaa8020e.png
[abc72ffc12ec807ab475b515aeea4f09.png]: https://img-blog.csdnimg.cn/img_convert/abc72ffc12ec807ab475b515aeea4f09.png
[c064e42a4f797b053fa7304d69190dbd.png]: https://img-blog.csdnimg.cn/img_convert/c064e42a4f797b053fa7304d69190dbd.png
[1862de4c87780b93f800756cb7459127.png]: https://img-blog.csdnimg.cn/img_convert/1862de4c87780b93f800756cb7459127.png
[1f9bbf1d6e75d03f157a7988a99f4316.png]: https://img-blog.csdnimg.cn/img_convert/1f9bbf1d6e75d03f157a7988a99f4316.png
[8d4b4fe25fae04626b924ed866192c35.png]: https://img-blog.csdnimg.cn/img_convert/8d4b4fe25fae04626b924ed866192c35.png
[d19bfcbcce27e2d2687d0b3296548633.png]: https://img-blog.csdnimg.cn/img_convert/d19bfcbcce27e2d2687d0b3296548633.png
[ded80b790d8a2442156b34cde6d7d083.png]: https://img-blog.csdnimg.cn/img_convert/ded80b790d8a2442156b34cde6d7d083.png
[b26c5999169284e7bc9274c432f45e7f.png]: https://img-blog.csdnimg.cn/img_convert/b26c5999169284e7bc9274c432f45e7f.png
[d0bd965f5ce0ef3c837feb93a75d7808.png]: https://img-blog.csdnimg.cn/img_convert/d0bd965f5ce0ef3c837feb93a75d7808.png
[67e05276914f0ff1ee8790d7f545538f.png]: https://img-blog.csdnimg.cn/img_convert/67e05276914f0ff1ee8790d7f545538f.png